d3.js在折線圖上更新圓圈

Question

我在那裏發帖，因爲我找不到其他帖子或谷歌上的東西。

http://jsfiddle.net/CUQaN/9/

正如你可以在JS小提琴看，我有在每個點的圓線圖。 我想用新數據更新此圖表。問題是，我可以獲得比我已經在圖表上得到的更少或更多的點。例如，我可以在我的折線圖上有8個點，然後當我更新圖表時，我可以只有4點，甚至15點。而我的圈子沒有正確更新，因爲我只是改變了已經存在的圈子的價值。 但我真的不知道如何正確更新它們。

我可以有有時數據：

  var data = [ 
       {"date":"4-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"3-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"2-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"1-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"30-Apr-12","close":Math.random()*354.98,"open":Math.random()*424.56}, 
       {"date":"27-Apr-12","close":Math.random()*24.00,"open":Math.random()*253.89}, 
       {"date":"26-Apr-12","close":Math.random()*490.70,"open":Math.random()*215.54}, 
       {"date":"25-Apr-12","close":Math.random()*42.00,"open":Math.random()*351.23}, 
       {"date":"24-Apr-12","close":Math.random()*210.28,"open":Math.random()*20.23}, 
       {"date":"23-Apr-12","close":Math.random()*20.70,"open":Math.random()*368.34}, 
       {"date":"20-Apr-12","close":Math.random()*412.98,"open":Math.random()*42}, 
       {"date":"19-Apr-12","close":Math.random()*26.44,"open":Math.random()*20.56}, 
       {"date":"18-Apr-12","close":Math.random()*48.34,"open":Math.random()*356.45}, 
       {"date":"17-Apr-12","close":Math.random()*26.44,"open":Math.random()*20.56}, 
       {"date":"15-Apr-12","close":Math.random()*48.34,"open":Math.random()*356.45}, 
      ]; 

而僅僅是數據的其他時間：（或多或少）

  var data = [ 
       {"date":"4-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"3-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"2-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"1-May-12","close":Math.random()*568.13,"open":Math.random()*35.12}, 
       {"date":"30-Apr-12","close":Math.random()*354.98,"open":Math.random()*424.56}, 
      ]; 

是有人能幫助我嗎？

非常感謝！

Answer 1

刪除舊點並添加新點可能會更好，而不是嘗試移動它們。要做到這一點，你可以使用一個ID功能，使點獨特的 - 見here

一個小例子：

svg.selectAll("circle") 
    .data(myData, function(d) { return d.x; }) 
    .enter() 
    .append("circle"); 

這裏最重要的部分是點通過它們的x值進行鑑定，而不是他們的數據點數組中的索引。事實上，這可能有助於你目前的情況，因爲積分只會上下移動，而不是左右移動。