更新多线图D3.js

我正试图通过使用PHP从mySQL数据库以5秒的间隔提取数据来更新d3多线图。目前该图正在显示，但没有更新 - 我知道有什么不对的与我的updateData函数，但已经尝试了所有可以想到的，似乎没有任何工作。任何人都可以帮忙吗？更新多线图D3.js

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

UPDATE：

正如你可以看到x轴线仅示出零星和某些行不与y轴对齐。

更新要点：

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

enter image description here 更新2：出于某种奇怪的原因，行有变色 - 或者完全移动不太确定。因此，在图上方的线条是从顶部蓝色，橙色，然后是白色 - 当图形更新蓝色可能会移动到底部，橙色顶部和中间白色等 - 但随机发生？

来源

2013-03-01 Newbie

我怀疑，需要你的数据基于ID的绑定信息。也就是说，要确保数据每次都能正确绑定到相同的DOM元素。也许检查https://github.com/mbostock/d3/wiki/Selections#wiki-data – cmonkey 2013-03-03 15:10:49

谢谢 - 更改关键parameterID而不是参数，并做了诀窍:) – Newbie 2013-03-06 21:34:25

我一直在争取这个完全相同的问题长时间。您的问题和解决方案对我来说非常合适......谢谢！ – brianz 2015-01-12 00:46:29

在你原来的图形绘制，正确使用：

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); })

来源

2013-03-01 16:31:11 cmonkey

感谢您的回复 - 仍然很少出现问题 - 请参阅上面的更新？ – Newbie 2013-03-02 17:28:36

更新多线图D3.js

回答

相关问题