d3.js - 数据连接中的继承

Question

关于数据连接的快速问题。假设我有一些元素，每个元素都包含一个 .当我最初将数据连接到 时，它会自动由我附加到输入选择的元素继承。

当数据发生更改并将其重新绑定(bind)时，我期望元素会获取新数据，但这并没有发生。

为了处理这个问题，我需要像这样显式地重新绑定(bind)较低级别的数据:

gElements.selectAll("circle")
    .data(function(d) { return [d]; }
    .enter().append("circle");

这将处理创建案例和随后的重新绑定(bind)。但这似乎有点多余，因为返回 [d] 本质上是从父元素初始继承数据时自动发生的。

这种方法是处理这个问题的正确方法，还是我在这里的某个地方感到困惑？

Answer 1

当您通过 selection.data 将数据绑定(bind)到元素时，它更新绑定(bind)到这些元素的数据。但是，它不会自动将新数据传播到后代元素；你必须自己做。

当您调用 selection.select , 对应于 selection.append ，来自父元素的数据绑定(bind)到每个选定元素的选定子元素。当您调用 selection.selectAll ，数据未绑定(bind)，因此您必须随后调用 selection.data 将新数据绑定(bind)到子项。

如果没有更多上下文，很难回答您的问题。如果您更新了 gElements 上的数据，并且每个 G 元素包含一个圆，您可以使用 selection.select 将数据从父 G 传播到子圆:

gElements.select("circle");

您编写的代码片段仅在您想创建一个新圆圈时使用，如果圆圈丢失。这在 Thinking with Joins 中有描述。 .您将编写的确切代码可能取决于它是在输入和更新时执行，还是仅在更新时执行。