D3中的选择:如何使用parentNode.appendChild？

Question

我想使用StackOverflow中的这个方法处理D3.js中重叠的SVG元素.

但是,由于我的代码的性质,我想使用D3选择器而不是this将元素重新添加到DOM.我的问题是:如何使用D3选择器来获取相关节点？

这就是原始示例的用法:

this.parentNode.appendChild(this);

这是我的尝试,它失败了"Uncaught TypeError:无法调用方法'appendChild'的undefined":

var thisNode = d3.select("#" + id);
thisNode.parentNode.appendChild(thisNode);

这个JSFiddle(改编自原始示例)演示了这个问题:http://jsfiddle.net/cpcj5/

我的D3选择this与原始示例有何不同？我尝试过使用thisNode.node().parentNode.appendChild(thisNode)但也失败了.

Answer 1

该.parentNode方法用于DOM元素,而不是d3选择.

从d3选择中访问DOM元素有点棘手,而且通常有更好的方法来实现您想要做的事情.无论如何,如果您选择了单个元素,它将是d3.selection的第一个项目中的第一个也是唯一一个项目 - 即您需要像这样访问它:

var someIdDOMelement = d3.select("#someid")[0][0];

使用此编辑的原始编辑示例:http://jsfiddle.net/cpcj5/1/

如果你有id并且特别想要获取DOM元素,我只需要使用getElementById:

var someIdDOMElement = document.getElementById("someid")  

纵观D3文档使用上绑定的事件,我们可以看到,你绑定功能中,该this变量是这是触发事件的DOM元素.因此,在处理d3中的事件处理时,您可以使用this从绑定函数中获取DOM元素.

但是,看看你的代码,我认为更容易坚持使用原始javascript方法重新附加节点的原始实现,然后使用d3.select绑定到的dom元素创建d3选择this.这就是原始代码的用法:http://jsfiddle.net/cpcj5/3/

如果您有任何困难,请发表评论,以便我可以解决.