javascript - ejemplos - d3.js examples

D3.js prepend(similar a jQuery prepend)

Question

Me gusta el uso de append en D3, y estoy buscando anteponer.

¿Existe esto en D3?

Answer 1

Puedes usar

selection.insert(newElement[, anotherExistingElement])

Por ejemplo:

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

El código anterior insertará un div antes del primer elemento secundario del elemento seleccionado. Consulte la documentation para obtener más información.

Otra posible forma de insertar elementos antes de cualquier nodo (incluidos los textos sin formato):

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>

Answer 2

Selection.lower ()

selection.lower() colocará un elemento como el primer hijo de su padre.

Junto con el apéndice de d3, selection.append().lower() puede replicar el prepend de jQuery

Desde D3 v4 +, D3 tiene los métodos selection.raise() y selection.lower() . Estos se usan con mayor frecuencia para mover elementos en un SVG para que ciertos elementos aparezcan sobresalientes de otros, donde el orden de los elementos SVG en el DOM determina el orden de dibujo. Pero, se pueden usar para cualquier elemento en el DOM.

Aquí hay una demostración rápida usando divs y párrafos:

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>

El fragmento toma un div con los siguientes contenidos:

Text
<p> Child Paragraph </p>

Y usa d3 para agregar un nuevo párrafo y luego bajarlo para que la estructura sea la siguiente:

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

Y para comparar con el prepend 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>

Más información

Selection.lower () se implementa como tal (consulte los docs para obtener más información):

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