web-dev-qa-db-fra.com

D3.js prepend (similaire au jQuery prepend)

J'aime l'utilisation de l'ajout dans D3 et je recherche le pré-ajout.

Cela existe-t-il en D3?

javascriptd3.jsprepend
66
Mia

Vous pouvez utiliser

selection.insert(newElement[, anotherExistingElement])

Par exemple:

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

Le code ci-dessus insérera un div avant le premier enfant de l'élément sélectionné. Vérifiez documentation pour en savoir plus.

Une autre façon possible d'insérer des éléments avant n'importe quel nœud (y compris les textes en clair):

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>
116
Gilsha

Selection.lower ()

selection.lower() placera un élément comme premier enfant de son parent.

Avec d3's append , selection.append().lower() peut répliquer jQuery prepend

Depuis D3 v4 +, D3 possède à la fois les méthodes selection.raise() et selection.lower(). Ceux-ci sont utilisés le plus souvent pour déplacer des éléments dans un SVG afin que certains éléments apparaissent au-dessus d'autres, où l'ordre des éléments SVG dans le DOM détermine l'ordre de dessin. Mais, ils peuvent être utilisés pour n'importe quel élément du DOM.

Voici une démonstration rapide à l'aide de divs et de paragraphes:

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>

L'extrait prend une div avec le contenu suivant:

Text
<p> Child Paragraph </p>

Et utilise d3 pour ajouter un nouveau paragraphe, puis l'abaisser afin que la structure soit la suivante:

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

Et pour comparaison avec le préfixe de jQuery:

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>

Plus d'informations

Le selection.lower () est implémenté comme tel (voir docs pour plus d'informations):

selection.each(function() {
  this.parentNode.insertBefore(this, this.parentNode.firstChild);
});
2
Andrew Reid