8

D3 で簡単な折れ線グラフを描こうとしていますが、いくつか問題があります。

グラフを動的にしたいので、データが更新されると、グラフが新しい値に移行するようにします。そのため、コードのどこかで D3 トランジションを使用する必要がありますが、折れ線グラフでそれを行う良い例が見つかりません。

これが私のコードの関連部分です。現時点では、これはまったく何も描画していません。

var data = [
 {
  "air_produced": 0.660985, 
  "air_used": 0.342706, 
  "datestr": "2012-12-01 00:00:00", 
  "energy_used": 0.106402
 } ... ];
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S");
data.forEach(function(d) {
  d.date = parseDate.parse(d.datestr);
});

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

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

// How to draw the line?
var linegraph = d3.select("path.line").datum(data);
line.transition().duration(1000).attr("d", line);
linegraph.enter().append("path")
    .attr("class", "line")
    .attr("d", line);

完全なグラフを含む JSFiddle : http://jsfiddle.net/zNX8p/

4

2 に答える 2

2

わかりました（と思います）：

var linegraph = svg.selectAll("path.line").data([data], function(d) { return d.date; });

linegraph.transition().duration(1000).attr('d', line);

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

datum選択を返さないenterため、代わりにデータを渡す必要がありますdata。

于 2013-09-17T12:17:11.507 に答える