d3.js - d3.js: 複数の y 軸値を持つデータセット配列

Question

私はd3.jsの初心者なので、親切にしてください:)

このjsbinの例を考える

次のデータセットがあります。

      var dataset = [
                      [d3.time.hour.utc.offset(now, -5), 1, 10], 
                      [d3.time.hour.utc.offset(now, -4), 2, 20], 
                      [d3.time.hour.utc.offset(now, -3), 3, 30], 
                      [d3.time.hour.utc.offset(now, -2), 4, 40], 
                      [d3.time.hour.utc.offset(now, -1), 5, 50], 
                      [now, 6, 60],
                    ];

2 つの質問です。

1. d3 は、データセット配列の y 軸データ (0 番目以外のすべての列、0 番目の列は x 軸 (時間)) の最大値を見つけるためのより良いアプローチを提供しますか? 現在、データセット配列全体をループして、最初の列を除いて 2 番目の配列を作成しています。おそらく、これに完全に使用する必要がある配列以外のより良いデータ構造がありますか?

       var data_arr = [];
   
       for (row in dataset){
           for (col=1;col < dataset[row].length; col++){
               data_arr.push(dataset[row][col]);
           }
       }
   
       var yScale = d3.scale.linear()
                            .domain([0, d3.max(data_arr)])
                            .range([h - padding, padding]);
   

2. それが解決されたら、一般的に複数の y 軸の値をグラフ化する方法を決定する必要があります。複数のy軸値が必要になる前に、これはうまくいきました：

       svg.selectAll("circle")
          .data(dataset)
          .enter()
          .append("circle")
          .attr("cx", function(d) {
               return xScale(d[0]);
          })
          .attr("cy", function(d) {
               return yScale(d[1]);
          })
          .attr("r", 2);
   

完全なコンテキストについては、ここでコード付きのグラフをご覧ください: http://jsbin.com/edatol/1/edit どんな助けも大歓迎です!

Answer 1

例にいくつかの変更を加えました。結果はhttp://jsbin.com/edatol/2/editで確認できます。

まず、データを少し修正しました。これは主に単なるスタイルの問題ですが、配列の代わりにオブジェクトを操作する方が簡単だと思います:

        //Static dataset
        var dataset = [
          {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 10}, 
          {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 20},
          {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 30},
          {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 40},
          {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 50},
          {x: now, y1: 6, y2: 60},
        ];

次に、次のようにドメインと範囲を見つけることができます。

var xDomain = d3.extent(dataset, function(i) { return i.x; });
var maxY = d3.max(dataset, function(i) { return Math.max(i.y1, i.y2); });  

次に、複数の y 値を追加するには、適切な値を使用して追加の円を追加するだけです。後で遷移や更新を行う場合にそれらを選択できるように、それらにさまざまなクラスを与えました。

        //Create circles
        svg.selectAll(".y1")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) { return xScale(d.x); })
           .attr("cy", function(d) { return yScale(d.y1); })
           .attr("class", "y1")
           .attr("r", 2);

        //Create circles
        svg.selectAll(".y2")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) { return xScale(d.x); })
           .attr("cy", function(d) { return yScale(d.y2); })
           .attr("class", "y2")
           .attr("r", 2);