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

Question

我可以在 SVG 组之间移动一个 SVG 元素 - 不需要在幕后进行太多计算，也不需要在我自己的代码中编写太多代码吗？ d3 api documentation提到您不能重新附加已删除的元素 (?)。

在从原始组中删除元素后重新创建元素 - 在我的代码中似乎很麻烦，并且对于 d3 和浏览器来说比可能的情况更昂贵。

这也与在将元素与组关联之前定义元素有关，而不仅仅是在组之间真正移动它(即，将元素从非组移动到组)。

Answer 1

docs you posted还提到您可以通过将函数传递给 .append 来重新添加元素。或 .insert .这是它所说的:

Note that there is not currently a dedicated API to add removed elements back to the document; however, you can pass a function to selection.append or selection.insert to re-add elements.

由于使用 .remove在选择返回该选择时，您可以将删除的元素存储在变量中，然后 .append使用 selection.node() 将其添加到新组从删除的选择中获取 DOM 元素:

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

这是一个简单的 Fiddle使用此技术在单击处理程序中将圆形元素从一组移动到另一组。