Ich mag die Verwendung von Append in D3 und suche nach Prepend.
Existiert das in D3?
javascript
d3.js
prepend
Mia
quelle
quelle
Selection.lower ()
selection.lower()
platziert ein Element als erstes Kind seines Elternteils.Zusammen mit d3 des append ,
selection.append().lower()
kann jQuery replizieren prependSeit D3 v4 + hat D3 beide
selection.raise()
undselection.lower()
Methoden. Diese werden am häufigsten verwendet, um Elemente in einem SVG so zu verschieben, dass bestimmte Elemente über anderen erscheinen, wobei die Reihenfolge der SVG-Elemente im DOM die Zeichnungsreihenfolge bestimmt. Sie können jedoch für jedes Element im DOM verwendet werden.Hier ist eine kurze Demonstration mit Divs und Absätzen:
Code-Snippet anzeigen
var div = d3.select("div"); div .append("p") .text("Inserted") .lower(); console.log(div.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="div"> Text <p> Child Paragraph </p> </div>
Das Snippet enthält ein Div mit folgendem Inhalt:
Und verwendet d3, um einen neuen Absatz anzuhängen und ihn dann so abzusenken, dass die Struktur wie folgt ist:
Und zum Vergleich mit jQuerys Prepend:
Code-Snippet anzeigen
var div = $("div"); div .prepend("<p>Inserted</p>"); console.log(div.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div"> Text <p> Child Paragraph </p> </div>
Mehr Info
Die selection.lower () ist als solche implementiert ( weitere Informationen finden Sie in den Dokumenten ):
selection.each(function() { this.parentNode.insertBefore(this, this.parentNode.firstChild); });
quelle