Question

我的d3选择从一个大型数据集开始，在我的SVG中为其中的每个元素添加一个圆圈，并设置circle元素的ID以匹配它所代表的数据项的ID。

然后，我在相同的选择上调用.data()，传入原始的较小子集。正如所料，我这样做后屏幕上的圆圈数与较小数据集中的项目数相匹配。但是，当我检查屏幕上的元素时，它们的ID与新数据集中项目的ID不匹配。

为什么会这样？

Answer 1

如果未将键功能传递给数据，则数据将通过其位置与现有元素相关联。

你可能想要像

这样的东西

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

要控制数据如何连接到元素，可以指定键功能。这将替换默认的by-index行为;为新数据数组中的每个元素调用一次键函数，并对选择中的每个现有元素再次调用。