更新多線圖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

回答

相關問題