javascript - d3js - 将父元素添加到选择中

Question

如何使用 d3.js 将父元素添加到选择中。可以说我有以下内容

<div class="i need a parent">...</div>
<div class="i need a parent">...</div>

我想将其修改为

<a href="...">
    <div class="i need a parent">...</div>
</a>
<a href="...">
    <div class="i need a parent">...</div>
</a>

非常感谢任何建议。

Answer 1

纯粹使用 d3 是不可能的，但使用一点标准 JavaScript 就足够简单了

var selection = d3.selectAll('div.needparent');
selection.each(function() {
    var oldParent = this.parentNode;
    var newParent = document.createElement('a');
    oldParent.replaceChild(newParent, this);
    newParent.appendChild(this);
})

您可以使用 d3 来执行迭代中的某些操作，但由于 replaceChild 需要标准 JavaScript，所以我始终坚持这样做。

需要注意的是，如果您将事件处理程序绑定(bind)到子元素，我不确定它们是否会通过这种方法保留。