html - d3 更新选择：d3 如何决定捕获哪些现有的 html 元素以供自己使用？

Answer 1

当您调用data(dataset)并且页面上已经有一个元素时，d3 决定该元素将与10- 第一个数组元素的数据相关联。这是因为该元素是<p>页面上的第 0 个元素，因此它必须与数据集的第 0 个元素相关联。换句话说，它基于数组中的索引来确定持久性。结果，该函数既不返回预先存在的元素，也不10返回与该值关联的潜在元素enter()，因为它们不被视为新元素，只是替换与现有元素关联的数据。

如果您希望它根据实际数据确定持久性，则必须将第二个参数传递给data()函数：

data(dataset, function(d, i) { return d; })
// NOTE: "return i;" would have the same effect as not passing in the 2nd param

现在 d3 将d在每种情况下进行比较——第 0 个元素和null你预先存在的元素为10——<p>并决定，因为它们不相等，它需要在返回的选择中包含第 0 个元素enter()，这将反过来为它附加一个元素。

此时，就 d3 而言，应该将预先存在的元素移除，它会在exit()选择中返回它，因此您可以remove()对其进行调用。

或者，根据您的目标，您可以保持data()调用单参数不变，并更新其文本——不是从enter()选择中，而是从主要的“更新”选择中。看到这个 jsFiddle。