在D3.js中繪製多條線

Question

到目前爲止，我一直在使用循環向D3可視化添加線條元素，但這看起來並不符合API的精神。

比方說，我已經得到了一些數據，

var data = {time: 1, value: 2, value2: 5, value3: 3,value4: 2}, 
      {time: 2, value: 4, value2: 9, value3: 2,value4: 4}, 
      {time: 3, value: 8, value2:12, value3: 2,value4:15}]); 

我想四條線，以時間爲X的所有4

我可以做這樣的事情：

然後逐個添加（或通過循環）。

var line1 = group.selectAll("path.path1") 
     .attr("d",l(data)); 
var line2 = group.selectAll("path.path2") 
     .attr("d",l2(data)); 
var line3 = group.selectAll("path.path3") 
     .attr("d",l3(data)); 
var line4 = group.selectAll("path.path4") 
     .attr("d",l4(data)); 

有沒有更好的更一般的方法來添加這些路徑？

Answer 1

是的。首先，我會調整你的數據更容易重複，像這樣：

var series = [ 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}], 
    [{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}], 
    [{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}], 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 15}] 
]; 

現在，你只需要一個通用的線：

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value); }); 

而且，那麼你可以添加所有的路徑元素一氣呵成：

group.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

如果你想使數據結構的幅面，你也可以在次提取到一個單獨的數組，然後使用該值的二維數組。這將是這樣的：

var times = [1, 2, 3]; 

var values = [ 
    [2, 4, 8], 
    [5, 9, 12], 
    [3, 2, 2], 
    [2, 4, 15] 
]; 

由於矩陣不包含的時間價值，你需要從線發生器的X-訪問查找。在另一方面，在Y-訪問被簡化了，因爲你可以直接通過矩陣值到Y規模：

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d, i) { return x(times[i]); }) 
    .y(y); 

創建的元素保持不變：

group.selectAll(".line") 
    .data(values) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line);