更新多线图D3.js

Question

我正在尝试使用PHP从mySQL数据库以5秒的间隔提取数据来更新d3多线图。目前图表正在显示但没有更新 - 我知道我的updateData函数有一些不正确但已经尝试了所有可以想到的东西，似乎没有任何工作。有人可以帮忙吗？

https://gist.github.com/Majella/ab32fe0151fd487da3f6

更新：

正如您所看到的那样，x轴线仅偶尔显示，而某些线不与y轴对齐。

更新了要点：

https://gist.github.com/Majella/ab32fe0151fd487da3f6

更新2 ：由于某些奇怪的原因，线条正在改变颜色 - 或完全不完全确定。因此，在上面的图形上，线条是从顶部 - 蓝色，橙色然后是白色 - 当图形更新时，蓝色可能会移动到底部，橙色在顶部，白色在中间等 - 但随机发生？

Answer 1

在图表的原始图形中，您正确使用：

var parameter = svg.selectAll(".parameter")
.data(data, function(d) { return d.key; })
    .enter().append("g")
    .attr("class", "parameter");

将数据（数据）连接到元素（g.parameter）

在更新功能期间，您需要再次加入数据才能执行元素的更新，删除和添加。 3 little circles tutorial是了解更多信息的好地方。

无论如何，在你的更新功能中，你可能想要这样的东西（未经测试）：

// re-acquire joined data
var containers = svg.selectAll("g.parameter")
    .data( data );

// update existing elements for this data
containers
    .select( "path.line" ) 
    .attr( "d", function(d) { return line(d.values); })