D3：沿 DOM 更新数据

Question

我在更新DOM 中子节点上的数据属性时遇到问题。我正在使用 SVG 并将一组数据绑定到父组 ('g') 元素。然后这些组包含一个圆圈和一些文本。当我第一次创建圆圈时，来自父“g”的数据会自动传入并绑定到圆圈。我无法弄清楚的是，当我更新父“g”元素上的数据时，如何更新子“圆”节点上的数据。

这是一个解释我正在尝试做的事情的示例：

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__; })

有没有人建议如何实现？

Answer 1

的.select()操作者，在除了选择单个元件，也从当前元素到所选择的元件传播的数据。如果每个g元素仅包含一个circle元素，则可以通过运行将其用于您的目的

test2.select("circle");

如果有多个，这将不会很好地工作circle，因为您需要单独选择它们中的每一个。