D3.js prepend (ähnlich wie jQuery prepend)

74

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

Existiert das in D3?

Mia
quelle

Antworten:

125

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>

Gilsha
quelle
16
Dies wird nicht, legen Sie jedoch vor jedem Klartext in dem Knoten /
Adam Tolley
1
Die Dokumentation wurde hierher verschoben: github.com/d3/d3-selection/blob/master/…
mjaskowski
@AdamTolley irgendeinen Vorschlag, wie man vor dem Plan Text einfügt?
Shruggie
1
@ben Ich habe eine mögliche Lösung in die Antwort aufgenommen. Ich hoffe es hilft.
Gilsha
11

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:

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:

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);
});
Andrew Reid
quelle