Javascript D3.js:绘制简单、可更新的线图?
我试图在D3中绘制一个简单的线图,但有一些问题 我希望图形是动态的——因此,当数据更新时,我希望图形转换为新值。所以我需要在我的代码中的某个地方使用D3转换,但我找不到一个使用折线图的好例子 下面是我代码的相关部分。目前,这根本没有画任何东西Javascript D3.js:绘制简单、可更新的线图?,javascript,d3.js,Javascript,D3.js,我试图在D3中绘制一个简单的线图,但有一些问题 我希望图形是动态的——因此,当数据更新时,我希望图形转换为新值。所以我需要在我的代码中的某个地方使用D3转换,但我找不到一个使用折线图的好例子 下面是我代码的相关部分。目前,这根本没有画任何东西 var data = [ { "air_produced": 0.660985, "air_used": 0.342706, "datestr": "2012-12-01 00:00:00", "energy_used": 0.10
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这里有完整的图表:明白了(我想):
datum
不返回enter
选择,因此您需要通过data
传递数据 d3有一个通用的更新模式,您应该在这种情况下使用它
约定有两个功能,一个用于设置可视化,另一个用于获取数据并更新可视化
update函数接收新数据,绑定它,更新图形,然后根据需要添加或删除对象
迈克·博斯托克(Mike Bostock)有一个由三部分组成的系列文章来解释这一点,你可以在这里找到:这似乎有一个有效的例子:它没有显示在有新数据时如何更新行。这最终有效吗?我被困在同一个步骤。
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);