D3.js prepend (ähnlich wie jQuery prepend)

Ich mag die Verwendung von Append in D3 und suche nach Prepend.

Existiert das in D3?

Sie können verwenden

selection.insert(newElement[, anotherExistingElement])

Zum Beispiel:

selection.insert("div",":first-child")

Der obige Code fügt ein divvor dem ersten untergeordneten Element des ausgewählten Elements ein. Weitere Informationen finden Sie in der Dokumentation .

Eine andere Möglichkeit, Elemente vor einem Knoten einzufügen (einschließlich einfacher Texte):

var parentEl = d3.select("div").node();
parentEl.insertBefore(document.createElement("div"), parentEl.childNodes[0]);

<script src="https://d3js.org/d3.v3.min.js"></script>
<div>
  This is a plain text
  <a></a>
</div>

Selection.lower ()

selection.lower() platziert ein Element als erstes Kind seines Elternteils.

Zusammen mit d3 des append , selection.append().lower()kann jQuery replizieren prepend

Seit D3 v4 + hat D3 beide selection.raise()und selection.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:

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:

Text
<p> Child Paragraph </p>

Und verwendet d3, um einen neuen Absatz anzuhängen und ihn dann so abzusenken, dass die Struktur wie folgt ist:

<p>Inserted</p>
Text
<p> Child Paragraph </p>

Und zum Vergleich mit jQuerys Prepend:

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);
});