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

Question

我想使用this method from StackOverflow处理D3.js中重叠的SVG元素。

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

这就是原始示例的用法：

this.parentNode.appendChild(this);

这是我的尝试，失败了“Uncaught TypeError：无法调用方法'appendChild'的未定义”：

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

这个JSFiddle（改编自the original example）演示了这个问题：http://jsfiddle.net/cpcj5/

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

Answer 1

.parentNode method用于DOM元素，而不是d3 selection。

从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 documentation for binding events using on，我们可以看到，在您绑定的函数中，this变量是触发事件的DOM元素。因此，在处理d3中的事件处理时，您只需使用this从绑定函数中获取DOM元素。

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

如果您遇到任何困难，请发表评论，以便我们解决。

Answer 2

你也可以在D3中使用selection.node（）：

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