Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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); //コピーした要素を追加する
}

_shimizu
群馬・東京間を行き来する出稼ぎエンジニアです。ブログではGIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。JavaScript勉強中
https://gunmagisgeek.com/blog/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away