9

D3 を使用して小さなテスト ライン チャートを作成しましたが、ライブラリにまったく慣れていないため、チャートに複数の線を追加する最善の方法が何であるかわかりません。現時点では、これには 1 つの線しか表示されていませんフィドル。

グラフに 2 つの線を表示したいのですが、コードをコピーして貼り付けずにそれを実現する方法がわかりません。ユーザーの選択に基づいて定期的にグラフを更新/アニメーション化したいので、非常に非効率的です。 .

これの代わりに、

var data = [12345,22345,32345,42345,52345,62345,72345,82345,92345,102345,112345,122345,132345,142345];

このようなものを表示したいのですが、

var data = [
            [12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], // line one
            [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] // line two
          ];

これは可能性がありますか？もしそうなら、必要に応じてグラフを簡単に更新/アニメーション化できるように、これにアプローチする最良の方法は何でしょうか?

注:私は単に、D3 のベスト プラクティスとライブラリ全体について学習し、慣れようとしているだけです。ありがとう。

4

1 に答える 1

13

これは可能で合理的です。データのネストについて説明しているD3 Nested Selection Tutorialに、これにアプローチするチュートリアルがあり ます。

以下は、これを示すためにあなたのフィドルからハッキングしたコードです。

var data = [        
[12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], 
[1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] 
          ];

var width = 625,
    height = 350;

var x = d3.scale.linear()
    .domain([0,data[0].length])   // Hack. Computing x-domain from 1st array
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0,d3.max(data[0])])  // Hack. Computing y-domain from 1st array
    .range([height, 0]);

var line = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); });

var area = d3.svg.area()
    .x(line.x())
    .y1(line.y())
    .y0(y(0));

var svg = d3.select("body").append("svg")
    //.datum(data)
    .attr("width", width)
    .attr("height", height)
  //.append("g");

var lines = svg.selectAll( "g" )
  .data( data );  // The data here is two arrays

// for each array, create a 'g' line container
var aLineContainer = lines
  .enter().append("g");  

/*svg.append("path")
    .attr("class", "area")
    .attr("d", area);*/

aLineContainer.append("path")
    .attr("class", "area")
    .attr("d", area);

/*svg.append("path")
    .attr("class", "line")
    .attr("d", line);*/

aLineContainer.append("path")
    .attr("class", "line")
    .attr("d", line);

/*svg.selectAll(".dot")
    .data(data)
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);*/
// Access the nested data, which are values within the array here
aLineContainer.selectAll(".dot")
  .data( function( d, i ) { return d; } )  // This is the nested data call
  .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);
​

1つの欠点は、最初の配列からx軸とy軸のドメインを計算したことです。これはハックですが、質問には正確には関係ありません。

出力イメージのサンプル

于 2012-12-03T20:37:07.810 に答える