D3.js：绘制简单、可更新的折线图？答案

【问题标题】：D3.js: draw simple, updatable line graph?D3.js：绘制简单、可更新的折线图？
【发布时间】：2013-09-17 12:04:49
【问题描述】：

我正在尝试在 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/

【问题讨论】：

这似乎有一个工作示例：bl.ocks.org/benjchristensen/2579599
没有显示当有新数据时如何更新行。

标签： javascript d3.js

【解决方案1】：

知道了（我认为）：

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 传递数据。

【讨论】：

这最终奏效了吗？我被困在同一步骤中。

【解决方案2】：

d3 有一个通用的更新模式，您应该在这种情况下使用它。

约定是有两个函数，一个用于设置可视化，另一个用于获取数据并更新可视化。

更新函数接收新数据，绑定它，更新图形，然后根据需要添加或删除对象。

Mike Bostock 有一个很棒的 3 部分系列对此进行了解释，您可以在这里找到：https://twitter.com/mbostock/status/252496768267333632

【讨论】：