d3.js linechart различные интерполяции для разных строк

Question

Я создал строку Chart и хочу изменить интерполяцию каждой строки. Здесь я нашел источник с различными интерполяциями: 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; 
};  

, комментируя раздел1 или раздел2 в конце источника, заставляет его работать. Затем появляется одна строка с указанной интерполяцией.

Answer 1

Не знаю, если это то, что вы хотите, но я пробовал ваш код и получал две линии с интерполяцией ... но с той же интерполяцией.

Просто позвоните интерполировать метод объекта графа, например:

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

Вы должны добавить .interpolate atrribute в nv.models .lineChart следующим образом:

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