javascript - 如何从 d3 节点数据中获取 dom svg 元素？

Question

我有 nodes 变量，它是一个包含图中所有节点的数组。每个节点在 DOM 中都有一个 SVG g (group) SVG 元素。

要选择具有 DOM 元素的数据，我执行 d3.select(myElement).data()[0]，但如何才能获得具有数据的 DOM 元素？

Answer 1

您可以使用 D3 的数据匹配来完成此操作。这个想法是让数据为您“识别”正确的元素。

d3.selectAll("allMyElements").data([datumIwantElementFor], suitableKeyFunction);

完整演示 here .

明确地说，我不推荐采用这种方法。当您向文档添加更多元素并意外选择其中一些元素、在多个位置使用相同数据或更改数据格式时，这很容易中断。除非您知道自己在寻找什么，否则它会导致很难发现的错误。

更好的方法是从该数据为您绑定(bind)数据的每个元素分配一个 ID 或类，以便您可以在拥有数据时直接选择它。这也会更有效率。