javascript - D3中选择多个元素添加单父节点

Question

我遇到问题，我必须通过选择多个元素来添加父节点。

我有:

<g class="group">
     <g class="Node" id="1">...</g>
     <g class="Node" id="2">...</g>
     <g class="Node" id="3">...</g>
     <g class="Node" id="4">...</g>
</g>

现在在上面的结构中，我必须选择一些具有类 Node 的元素，并为它们添加一个父单父元素。

它应该看起来像这样，例如，如果我选择节点 2 和 3:

<g class="group">
    <g class="Node" id="1">...</g>
    <g class="Grp">
        <g class="Node" id="2">...</g>
        <g class="Node" id="3">...</g>
    </g>
    <g class="Node" id="4">...</g>
</g>

有什么方法可以使用 javascript 或 D3 进行这种操作。

Answer 1

只是为了完整起见，这是(其中之一)用于执行此操作的惯用 D3:

var group = d3.select(".group");
var newGroup = group.insert("g", "#g2").attr("class", "Grp");
var nodes = group.selectAll("#g2, #g3").remove();
nodes.each(function() {
  var self = this;
  newGroup.append(function() {
    return self
  });
});

remove() 方法的优点在于，与 D3 中的几个方法一样，它返回选择。因此，我们可以删除元素但保留对它们的引用，这样我们可以稍后追加它们(在新组内)。

这是演示。 SVG 中不会显示任何内容(涂成蓝色)，您必须使用浏览器的 Web 检查器检查 SVG 以查看组结构:

var group = d3.select(".group");
var newGroup = group.insert("g", "#g2").attr("class", "Grp");
var nodes = group.selectAll("#g2, #g3").remove();
nodes.each(function() {
  var self = this;
  newGroup.append(function() {
    return self
  });
});

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg style="background-color:powderblue;">
  <g class="group">
     <g class="Node" id="g1"></g>
     <g class="Node" id="g2"></g>
     <g class="Node" id="g3"></g>
     <g class="Node" id="g4"></g>
</g>
</svg>