D3.jsで要素をコピーして追加する

z-indexが効かないsvgでは、特定の要素を最前面に出したいときなどに要素をコピーして他の要素よりあとに追加するなどの処理が頻繁に必要になる。

サンプル

「circle要素を属性値丸ごとコピーしたい」ってときは以下の方法でコピーできる。

html

<svg>
  <circle cx="100" cy="60" r="40" fill="red" stroke="black" />
  <circle cx="300" cy="120" r="60" fill="blue" stroke="black" /> 
</svg>

javascript

var svg = d3.select("svg")

d3.selectAll("circle") //コピーする対象をセレクト
  .each(copy);

function copy(){
  var nodeName = d3.select(this).node().nodeName;
  var nodeAttr = d3.select(this).node().attributes;

  var objAttr = {}
  Object.keys(nodeAttr).forEach(function(key){
    objAttr[nodeAttr[key].name] = nodeAttr[key].value;
  });

  svg.append(nodeName).attr(objAttr); //コピーした要素を追加する
}