Javascript d3.js折线图不同直线的不同插值

我已经创建了一个折线图，希望更改每条线的插值。 在这里，我发现了一个具有不同插值的源：

为只有一行的折线图执行此操作：工作正常！ 对于具有不同插值的不同线条的图表：不要理解它

var chart;
nv.addGraph(function() {
  chart = nv.models.lineChart()
  .options({
    margin: {left: 100, bottom: 100},
    x: function(d,i) { return i},
    showXAxis: true,
    showYAxis: true,
    transitionDuration: 250
  })
  ;

    chart.yAxis
       .axisLabel('y axis')
       .tickFormat(d3.format(''))
       .axisLabelDistance(50);

  d3.select('#chart1 svg')
    .datum(dataForChart)
    .call(chart);


  nv.utils.windowResize(chart.update);


  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});

var dataForChart=function(){

       var section1 = new Array();
       section1.key="Section 1";
       section1.values = new Array();
       section1.color="#1F77B4";
       section1.interpolate='basis';

       var section2 = new Array();
       section2.key="Section2";
       section2.values = new Array();
       section2.color="#2CA02C";
       section2.interpolate='step-before';

        for (i=0;i<12;i++){
            date=new Date(2013,i,1);

            section1.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": i*3};
            section2.values[i] = {"y" : Math.round(6*i+2*getRandom(1,2)), "x": i/1.5};
         }

         function getRandom(min, max) 
         {
            return Math.random() * (max - min + 1) + min;
         }

         var dataArray=new Array();
         dataArray.push(section1); //Commenting out section1 or section2 makes it work
         dataArray.push(section2);

       return dataArray;
};    

var图；
nv.addGraph（函数（）{
chart=nv.models.lineChart（）
.选项({
边距：{左：100，下：100}，
函数（d，i）{返回i}，
肖克西斯：没错，
showYAxis：没错，
过渡期：250
})
;
图1.yAxis
.axisLabel（“y轴”）
.tickFormat（d3.format（“”））
.轴间距（50）；
d3.选择（“#图表1 svg”）
.基准面（dataForChart）
.电话（图表）；
nv.utils.windowResize（图表更新）；
on（'stateChange'，function（e）{nv.log（'newstate:'，JSON.stringify（e））；}）；
收益表；
});
var dataForChart=函数（）{
var section1=新数组（）；
section1.key=“Section 1”；
section1.values=新数组（）；
第1节颜色=“#1F77B4”；
第1节内插“=”基“；
var section2=新数组（）；
section2.key=“section2”；
section2.values=新数组（）；
第2节颜色=“#2CA02C”；
第2节插入“='step-before'；
对于（i=0；i不知道这是否是您想要的，但我尝试了您的代码，并使用插值获得了两行……但使用相同的插值

只需在graph对象上调用interpolate方法，如下所示：

nv.addGraph(function() {
  chart = nv.models.lineChart()
  .options({
    margin: {left: 100, bottom: 100},
    x: function(d,i) { return i},
    showXAxis: true,
    showYAxis: true,
    transitionDuration: 250
  })
  .interpolate("cardinal");
  ;

这适用于这两个部分，但…
您必须在nv.models.lineChart中添加.interpolate属性，如下所示：

 lines
    .width(availableWidth)
    .height(availableHeight)
    .interpolate(data.map(function(d,i) {
      return d.interpolate;}).filter(function(d,i) { return !data[i].disabled}))
    .color(data.map(function(d,i) {
      return d.color || color(d, i);
    }).filter(function(d,i) { return !data[i].disabled }));

lines1
    .width(availableWidth)
    .height(availableHeight)
    .interpolate(data.map(function(d,i) {
      return d.interpolate;}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}))
    .color(data.map(function(d,i) {
      return d.color || color[i % color.length];
    }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}));

  lines2
    .width(availableWidth)
    .height(availableHeight)
    .interpolate(data.map(function(d,i) {
      return d.interpolate;}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}))
    .color(data.map(function(d,i) {
      return d.color || color[i % color.length];
    }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));

之后，您可以像在第一篇文章中一样使用.interpolate属性

我还对nv.models.multiChart中的线型进行了如下更改：

 lines
    .width(availableWidth)
    .height(availableHeight)
    .interpolate(data.map(function(d,i) {
      return d.interpolate;}).filter(function(d,i) { return !data[i].disabled}))
    .color(data.map(function(d,i) {
      return d.color || color(d, i);
    }).filter(function(d,i) { return !data[i].disabled }));

lines1
    .width(availableWidth)
    .height(availableHeight)
    .interpolate(data.map(function(d,i) {
      return d.interpolate;}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}))
    .color(data.map(function(d,i) {
      return d.color || color[i % color.length];
    }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}));

  lines2
    .width(availableWidth)
    .height(availableHeight)
    .interpolate(data.map(function(d,i) {
      return d.interpolate;}).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}))
    .color(data.map(function(d,i) {
      return d.color || color[i % color.length];
    }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));

在这里发现：
感谢您的回复，但我想要的是具有不同插值的不同线条。您自己尝试过吗，Anil？我为nv.models.lineChart应用了修补程序，但插值不起作用…不可能与NVD3一起使用；NVD3函数只传递您为“插值”指定的任何值该方法只接受字符串，不接受基于数据的函数。我可以问一下，为什么在同一个图形上需要不同的直线-曲线样式吗？在我看来，这似乎是一个糟糕的设计选择。我只想这样做是为了演示问题。但如果不起作用，也可以。但我需要决定在数据输入ar中使用哪种插值但是这也不起作用，就像@AmeliaBR说的，它不接受函数一样？你可以编写自己的函数来访问数据数组，以确定要使用哪种类型的插值。但是，除非你更改NVD3代码，否则你只能在每个图中使用一种类型的插值。为了演示，可以创建一个单选按钮/列出允许用户选择哪个选项的选择输入，然后设置
chart.interpolate（option）；chart.update（）；
以切换模式。