javascript - d3.js linechart 不同线的不同插值

Question

我创建了一个折线图，想更改每条线的插值。 在这里我找到了一个具有不同插值的来源:https://www.dashingd3js.com/svg-paths-and-d3js

为只有一条线的折线图执行此操作:工作正常! 对于具有具有不同插值的不同线条的图表:不明白。

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;
};    

通过在源代码末尾注释掉 section1 或 section2 使其工作。然后出现带有指定插值的一行。

Answer 1

不知道这是否是您想要的，但我尝试了您的代码并得到了带有插值的两行......但插值相同。

只需在图形对象上调用 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");
  ;

虽然这适用于两个部分...