D3：更新DOM下的數據

我在更新DOM中子節點上的數據屬性時遇到問題。我正在使用SVG並將一組數據綁定到父組（'g'）元素。這些組包含一個圓圈和一些文字。當我第一次創建圓時，來自父'g'的數據會自動傳入並綁定到該圓。當我更新父'g'元素上的數據時，我無法弄清楚如何更新子節點上的數據。D3：更新DOM下的數據

這裏是解釋什麼，我試圖做一個例子：

var test = svg.selectAll("g").data([1,2,3,4]); 
test.enter().append("g"); 
test.append("circle");

我現在有以下DOM：

svg -> g (__data__ = 1) -> circle (__data__ = 1) 
     g (__data__ = 2) -> circle (__data__ = 2) 
     g (__data__ = 3) -> circle (__data__ = 3) 
     g (__data__ = 4) -> circle (__data__ = 4)

現在我要地圖新數據：

var test2 = svg.selectAll("g").data([9,8,7,6]);

其中給出以下DOM：

svg -> g (__data__ = 9) -> circle (__data__ = 1) 
     g (__data__ = 8) -> circle (__data__ = 2) 
     g (__data__ = 7) -> circle (__data__ = 3) 
     g (__data__ = 6) -> circle (__data__ = 4)

我不知道如何讓子圓圈節點繼承父g元素的數據值。

我已經試過類似的事情沒有成功如下：

test2.selectAll("circle").data(function(d) { return d; })

和

test2.selectAll("circle").data(function(d) { return this.parentNode.__data__; })

有沒有人有意見，這是怎麼做到的呢？

來源

2013-10-09 Brian

如果你在每個'g'中只有一個圓圈，你可以做'test2.select（「circle」）;'這會傳播數據。 –

拉斯，這工作！謝謝！ – Brian

我也將其添加爲答案。 –

.select()運算符除了選擇單個元素之外，還將數據從當前元素傳播到選定元素。您可以使用此爲您的目的，如果每個g元素僅包含通過運行

test2.select("circle");

這一個circle元素將不是很好，如果有一個以上的circle的工作，雖然，因爲你需要選擇他們每個人個別。

來源

2013-10-09 19:56:02

謝謝，我錯過了select將祖先數據綁定到孩子。如果你有一個時刻：在我看來，'test2.selectAll（「circle」）.data（function（d）{return d;}）'應該已經工作了......是否有一個簡單的解釋，「T？ – Brian

這僅適用於綁定到父元素的數據嵌套時（例如，一組數組。在較低級別，將會綁定一個嵌套元素。有關示例用法，請參見[嵌套選擇教程]（http://bost.ocks.org/mike/nest/）。 –

D3：更新DOM下的數據

回答

相關問題