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

请注意，如果您将事件处理程序绑定到子元素，则我不确定使用这种方法会保留它们。