Question

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

为只有一行的lineChart执行此操作：工作正常！对于具有不同插值的不同行的图表：不要得到它。

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");
  ;

这适用于两个部分，但......

Answer 2

您必须在nv.models.lineChart中添加.interpolate atrribute，如下所示：

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

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

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

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

在此处找到：https://github.com/novus/nvd3/issues/193

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

2 个答案: