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，因此我始终坚持使用它。

需要注意的是，如果您将事件处理程序绑定到子元素上，我不确定是否会使用此方法保留它们。