D3.jsで複数の線を描く

Question

これまで、D3視覚化に線要素を追加するためにループを使用してきましたが、これはAPIの精神のようには見えません。

私はすべての4

用Xとして、時間と私はこのような何かを行うことができ、4本のラインが欲しい

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

、のは、私はいくつかのデータを持っているとしましょう：

これらを1つずつ（ループで）追加します。

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 line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value); }); 

そして：今、あなたは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}] 
]; 

：まず私はこのような簡単に反復処理のためにデータを再構築でしょう：

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

あなたがデータ構造形式を小さくしたい場合は、また別の配列に回を抽出し、その後、値のための2次元配列を使用することができます。それは次のようになります。

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