d3 Wie fügt man ein neues SVG-Element vor einem anderen Element ein?

Question

Dank an this question Ich denke, ich habe gelernt, wie man das macht, aber ich kann nicht wirklich glauben, dass ich es richtig gemacht habe, wie es hässlich ist, wie Sie mögen.

Nehmen wir an, es gibt ein Element #foo und ich möchte ein SVG Element vor es erstellen. Muss ich das wirklich tun:

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

Fehle ich etwas? (EDIT: klar sein, der obige Beispielcode funktioniert, aber es ist ziemlich undurchsichtig und enthält Wiederholung des Wählers.)

Answer 1

Sie müssen nur die type und die selector:

selection.insert(type, before) 

Zum Beispiel in In dieser Demo ist der Kreis ein Element mit der ID foo. So,

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

Fügt ein Kind SVG vor dem Kreiselement ein.

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>