如何從d3節點數據獲取dom svg元素？

Question

我有nodes變量，它是一個包含圖形中所有節點的數組。每個節點在DOM中都有一個SVG g（組）SVG元素。

要選擇具有DOM元素的數據，我做了d3.select(myElement).data()[0]，但是如何獲取具有該數據的DOM元素？

Answer 1

你可以使用D3的數據匹配來做到這一點。這個想法是讓數據爲你「識別」正確的元素。

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

完整演示here。

要說清楚，我做不是建議採取這種方法。當您向文檔添加更多元素並意外選擇其中一些元素，在多個地方使用相同數據或更改數據格式時，這很容易中斷。除非你知道你在找什麼，否則它會導致很難發現的錯誤。

更好的方法是從該數據中爲每個綁定數據的元素分配一個ID或類，以便您可以在擁有數據時直接選擇它。這也會更有效率。