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

Question

我可以在SVG组之间移动SVG元素 - 不需要在幕后进行太多计算,也不在我自己的代码中制作太多代码吗？该D3 API文档中提到你不能再追加删除元素(？).

在将元素从原始组中删除后重新创建元素 - 在我的代码中似乎很麻烦,对于d3和浏览器而言,如果可能的话,它可能会更加昂贵.

这也与在将元素与组关联之前定义元素相关,而不仅仅是为了在组之间真正移动它(即,用于将元素从非组移动到组).

Answer 1

您发布的文档还提到您可以通过将函数传递给.append或重新添加元素.insert.这就是它所说的:

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

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

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

这是一个简单的小提琴,它使用这种技术在点击处理程序中将圆形元素从一个组移动到另一个组.

Answer 2

你不能在 D3 中执行此操作，但 JQuery 有此.appendTo()功能，例如

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