我可以在d3.js中的SVG组之间移动SVG元素吗

我可以在SVG组之间移动SVG元素吗？不需要在幕后进行太多计算，也不需要在自己的代码中编写太多代码？您不能重新附加删除的元素

在将元素从其原始组中移除后重新创建它——在我的代码中可能看起来很麻烦，而且对于d3和浏览器来说，这比可能的情况下更昂贵

---

这也适用于在将元素与组关联之前定义元素，而不仅仅是在组之间移动元素，即将元素从非组移动到组。

在D3中不能这样做，但JQuery具有相应的功能，例如

$("#element").appendTo("#otherGroup");

还提到可以通过向.append或.insert传递函数来重新添加元素。它是这样说的：

注意，目前没有专门的API将删除的元素添加回文档；但是，可以将函数传递给selection.append或selection.insert以重新添加元素

由于对选择项使用.remove会返回该选择项，因此可以将删除的元素存储在变量中，然后使用selection.node将其附加到新组以从删除的选择项中获取DOM元素：

var removed = yourSelection.remove();
yourTargetGroup.append(function() {
  return removed.node();
});

---

下面是一个简单的示例，它使用此技术在单击处理程序中将圆形元素从一个组移动到另一个组。

也许您可以使用多个元素来完成此操作：

d3.select('#btn').on('click', function() {
  circle.remove()
    .each(function(){
    group2.node().appendChild(d3.select(this).node());
  });
});

---

要在DOM树中只移动现有节点，不必先删除它们，然后在不同位置重新附加这些相同的节点。用途如下：

如果给定的子节点是对文档中现有节点的引用，appendChild会将其从当前位置移动到新位置。在将该节点附加到其他节点之前，无需将其从父节点中移除

这意味着节点不能同时位于文档的两点中。因此，如果节点已经有父节点，则首先移除该节点，然后将其附加到新位置

正如其他回答者已经提到的，当传递函数时，selection.append和selection.insert将分别附加或插入该函数返回的节点。知道了这一点，在DOM节点周围从其当前位置移动到新目标所需要的就是

target.append(() => existingNode);  // target is a D3 selection, existingNode is a native DOM node

将其放在工具箱中，同时在多个节点之间移动也相当容易：

selectionToBeMoved.each(function() { target.append(() => this); });

看看下面的演示，看看它的实际效果。海蓝色的两个圆圈从g1组移动到g2组

恒定电流=d3.G1； const target=d3.selectg2； 当前。选择AllCircle[填充=海蓝宝石] .eachfunction{target.append=>this；}；

---

谢谢，但我们不使用jQuery，因为我们不需要支持旧的浏览器。。。我不会为此介绍它。一般来说，单独移动SVG元素是否安全（例如，移动到一个组中，然后在其上调用d3.js）？当然，唯一需要记住的是，您也将移动任何绑定的数据。