d3.js linechart不同线的不同插值答案

【问题标题】：d3.js linechart different interpolations for different linesd3.js linechart不同线的不同插值
【发布时间】：2014-01-23 21:54:40
【问题描述】：

我创建了一个折线图，并希望更改每条线的插值。在这里我找到了一个不同插值的来源：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 使其工作。然后出现指定插值的一行。

【问题讨论】：

NVD3 不可能； NVD3 函数只是将您为“interpolate”指定的任何值传递给 d3.svg.line.interpolate() 方法，该方法只接受字符串，而不接受基于数据的函数。我可以问为什么您想要在同一个图表上使用不同的线曲线样式吗？在我看来，这似乎是一个糟糕的设计选择。
我只是想为演示问题这样做。但如果它不起作用也没关系。但我需要决定在数据输入数组中使用哪种插值。但这也行不通，就像@AmeliaBR 说的那样，它不接受函数？
您始终可以编写自己的函数来访问数据数组以确定要使用的插值类型。但是您只能在每个图表中使用一种插值类型，除非您更改 NVD3 代码。为了演示，可能创建一个单选按钮/列表选择输入，允许用户选择哪个选项，然后设置chart.interpolate(option); chart.update(); 切换模式。

标签： javascript d3.js nvd3.js

【解决方案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");
  ;

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

【讨论】：

谢谢你的回复，但我想要的是有不同的线和不同的插值。

【解决方案2】：

您必须在 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 }));

之后，您可以像在第一篇文章中一样使用 .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

【讨论】：

你自己试过这个吗？我为 nv.models.lineChart 应用补丁，但插值不起作用...