2

円としてプロットされている複数の y 軸値を持つグラフを作成しました。各 y 軸の値セットを線 (基本的には折れ線グラフ) で接続したいと考えています。

私のエラーは、y 軸線の値を定義しようとしている方法にあると思います。

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

ここに私のデータセットがあります:

var dataset = [
      {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 3, y3: 2}, 
      {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 2, y3: 4},
      {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 3, y3: 1},
      {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 1, y3: 2},
      {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 5, y3: 3},
      {x: now, y1: 6, y2: 4, y3: 3},
    ];

そして、これが今の私のグラフの完全な例です: http://jsbin.com/edikeg/1/edit

line() メソッドの API リファレンスを読みましたが、他に何を試せばよいかわかりません。これを達成するための最善のアプローチ、および d3.js を開始するためのヒントや初心者用のリソースを検討するための追加の方法を誰かが推奨できる場合は、大いに感謝します。

ありがとう

4

1 に答える 1

6

まず、データセットが最適でない形式になっています。より良い形式は、ライン/ポイントセットごとに1つのオブジェクトを作成することです。

var dataset = [
    [
        {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
        {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
        {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
        {x: d3.time.hour.utc.offset(now, -2), y: 4}, 
        {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
        {x: now, y: 1}
    ],
    [
        // y2-values paired with x-values
    ],
    [
        // y3-values paired with x-values
    ]
];

なぜ聞くの？d3を使用してオブジェクトおよびオブジェクトのグループを作成する方が簡単だからです。必要に応じて、現在のデータをこの形式に変換するマップ関数を作成することもできます。

これで、より簡単な形式のデータを使用して、線と円を作成するためのコードがデータセット内のアイテムの数に依存しなくなります。ここで動作する、書き直されたバージョンをチェックしてください：

http://jsbin.com/edikeg/3/edit

何が起こっているかの基本的な説明：

データセット内の各アイテムに対して、各パスとその各円点を保持するためg.lineのaを作成します。pathContainer

  var pathContainers = svg.selectAll('g.line')
    .data(dataset);

  pathContainers.enter().append('g')
    .attr('class', 'line');

次に、それぞれpathContainerに、を作成しpathます。

  pathContainers.selectAll('path')
    .data(function (d) { return [d]; }) // continues the data from the pathContainer
    .enter().append('path')
      .attr('d', d3.svg.line()
        .x(function (d) { return xScale(d.x); })
        .y(function (d) { return yScale(d.y); })
        .interpolate('monotone')
      );

最後にcircle、データセット内の各ポイントにそれぞれのを作成しますpathContainer

  pathContainers.selectAll('circle')
    .data(function (d) { return d; })
    .enter().append('circle')
    .attr('cx', function (d) { return xScale(d.x); })
    .attr('cy', function (d) { return yScale(d.y); })
    .attr('r', 5);

お役に立てれば！

于 2012-11-02T22:48:53.830 に答える