d3選択のコピーと挿入

Question

d3プログラムでは、ノード（d3.selection付き）を取得してから、同じsvgに挿入する必要があります。

私はappendやinsertのようないくつかの関数があることを知っていますが、これらの関数は新しい要素用です。 {_groups、_parents}

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

注：

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

今私のVARノードには、次の属性を得ました。私はあなたの選択のクローンを作成するために、この機能を使用したノード

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「グループ」のグループ（一方RECTと一つの円）がクローン化された例、（翻訳だけ良好クローンを表示することがある）である。

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によって書かれたものです。