复制并插入到d3选择中

Question

在d3程序中，我需要获取一个节点（使用d3.selection），然后我想插入相同的svg。

我知道有一些函数像append和insert，但是这些函数是用于新元素的。现在

var node = d3.select("rect#someId"); //node with some attributes and listeners 

我的VAR节点有以下属性： {_groups，_parents}

var anotherNode = d3.select("anotherNode").insert(node); //It work but it would be great a similar function or a workaround 

注意。我需要保持节点

Answer 1

使用此功能的听众克隆您的选择：

function clone(selector) { 
    var node = d3.select(selector).node(); 
    return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling)); 
} 

然后，您可以用clone("#foo")（通过ID）或clone(".foo")（按类别）调用它。

下面是一个例子，其中基团（一个矩形和一个圆）与ID“基团”被克隆（在翻译只是为了更清楚地看到克隆）：

function clone(selector) { 
 
    var node = d3.select(selector).node(); 
 
    return d3.select(node.parentNode.insertBefore(node.cloneNode(true), 
 
node.nextSibling)); 
 
} 
 

 
var copy = clone("#group").attr("transform", "translate(120,100)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="200" height="200"> 
 
\t <g id="group"> 
 
\t \t <rect x="10" y="10" width="50" height="20" fill="teal"></rect> 
 
\t \t <circle cx="35" cy="40" r="20" fill="red"></circle> 
 
\t </g> 
 
</svg>

PS：这不会克隆听众。另外，这个函数不是我的，它是由Bostock写的。