d3既存の他の要素の前に新しいSVG要素を挿入する方法は？

Question

this questionのおかげで、私はこれを行う方法を学んだと思うが、私はあなたが好きなように醜いので、私はそれが正しいと信じることはできません。

要素が#fooで、SVG要素をの前に作成したいとします。

var svg = d3.select(d3.select('#foo').node().parentNode) 
    .insert('svg', '#foo') 

私には何か不足していますか？ （編集：明確にするために、上記のサンプルコードは、作業を行いますが、それはかなり不透明だとセレクタの繰り返しが含まれています。）

Answer 1

あなただけtypeとselectorが必要になります。例えば

selection.insert(type, before) 

、中このデモでは、円はID fooの要素です。したがって、

var svg2 = svg.insert("svg", "#foo"); 

円要素の前に子SVGを挿入します。あなたの詳細な応答のための

var svg = d3.select("body").append("svg") 
 
var circle = svg.append("circle").attr("id", "foo"); 
 
var svg2 = svg.insert("svg", "#foo"); 
 
svg2.attr("id", "childSVG"); 
 

 
var mySVG = (new XMLSerializer()).serializeToString(svg.node()); 
 
console.log(mySVG)

<script src="https://d3js.org/d3.v4.min.js"></script>