d3 js輸入法不能正常工作

Question

問題是用d3 js輸入法。以下是步驟和結果。

1. 我使用data(source).enter()向svg添加了幾個圓圈。我得到了確切的圈數。

2. 數據源發生變化，新數據源的元素數量減少。所以我使用exit來刪除多餘的圈子。這也是一種魅力。其他圈子被刪除。

   circles.data(source2).exit().remove(); 
   

3. 數據源再次發生變化，這次它有比source2更多的元素。在這種情況下，我使用data(source3).enter()來添加更多圈子。但這從來沒有發生過。

這是一個粗糙的重建問題的小提琴。 http://jsfiddle.net/tejasj/z59mgb03/1/

更新：新的fiddle與代碼中的註釋。

Answer 1

您的代碼有兩個主要問題。一種是，不是使用相同的選擇來輸入/更新/退出，而是使用相同選擇器的不同選擇。也就是說，你的代碼看起來是這樣的：

circles.data(...).enter()... 
circles.data(...).exit()... 

這幾次（每次調用.data()時間）相匹配的數據，並不能達到你要找的狀態（即DOM）變化的結果撥打.data()。也就是說，您只需匹配一次數據，即可獲得輸入選擇和附加元素。現在，當你匹配數據時，會有不同的元素，匹配會做不同的事情。

正確的方式在多個選擇操作是爲了節省挑選：

var sel = circles.data(...); 
sel.enter()... 
sel.exit()... 

的第二個問題是，你在circles操作，它包含了DOM的「凍結」視圖中，您加入後第一組圓圈。只要您對其進行更新，它就不會反映實際的DOM。明確選擇的元素，你想，而不是：

var sel = svg.selectAll("circle").data(...); 
sel.enter()... 

總之，這兩件事情都搞亂了D3的數據匹配機制的工作原理完全的方式，你得到的東西從你所期望的完全不同。完整的演示修復程序here。