D3在屏幕上留下錯誤的元素

Question

我的d3選擇從一個大型數據集開始，爲其中的每個元素添加一個圓圈到我的SVG，並設置circle元素的ID以匹配它所表示的數據項的ID。

然後，我在相同的選擇上調用.data()，傳入原始的較小子集。正如所料，我這樣做後屏幕上的圓圈數量與較小數據集中的項目數量相匹配。但是，當我檢查屏幕上的元素時，其ID與新數據集中項目的ID不匹配。

爲什麼會這樣呢？

Answer 1

如果您沒有將關鍵函數傳遞給數據，則數據將通過它們的位置與現有元素相關聯。

你可能要像

.data(data, function(d) { return d.id; }); 

從documentation：

以控制數據是如何合併的元素，可以指定一個關鍵功能。這取代了默認的索引行爲;對新數據數組中的每個元素調用一次該關鍵函數，並再次對該選擇中的每個現有元素調用該函數。