3

次のような JSON blob から複数の行を含むプロットを作成しようとしています。

{"2007": [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...],
 "2008": [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...],
  ...
 "2012": [{"val":40, "mon":8}, {"val":50, "mon":9}, {"val":60, "mon":10}, ...]
}

データは基本的に各年の月間集計であり、年によってはデータがない月もある。ただし、d3 でデータを解析する方法が正確にはわかりません。など、さまざまな方法を試しました。

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

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

しかし、データを SVG 行に入れることができないようです。助言がありますか？JSON を構造化するより良い方法はありますか?

4

2 に答える 2

4

他の誰かがこの問題に遭遇した場合に備えて、これがうまくいきました。パス要素の「d」属性に連想配列の値を返す関数を渡すのがコツです。

  entries = d3.entries(data);

  var colors = d3.scale.category20()
    .domain(d3.keys(data));

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

  svg1.selectAll(".line")
    .data(entries)
  .enter().append("path")
    .attr("class", "line")
    // function(d), not just line function 
    .attr("d", function(d){ return  line(d.value); })
    .attr("stroke", function(d) { return colors(d.key) });

この回答からの助けもいくつかあります: javascript D3の問題でネストされたデータを使用する

于 2013-01-14T21:01:14.957 に答える
1

私の推測では、ここでの最大の問題は、配列ではなくオブジェクトから始めていることです。d3.dataオブジェクトではなく配列を受け取るため、次のようにデータを設定する必要があります。

[
  [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...],
  [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...],
  ...
]

現在のデータをこの形式に変換する必要がある場合は、を見てくださいd3.entries。これにより、キーの配列とポイントの配列が得られます。

[
  {
    key: "2008",
    value: [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...]
  },
  { 
    key: "2008",
    value: [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...]
  },
  ...
]

上記の最初のデータ形式を使用した、グラフの単純なケースのバージョンについては、このフィドルを参照してください：http: //jsfiddle.net/nrabinowitz/kmmyc/

于 2013-01-13T22:23:56.823 に答える