D3.js prepend (подібно до jQuery prepend)

Мені подобається використання append у D3, і я шукаю prepend.

Чи існує це в D3?

Можна використовувати

selection.insert(newElement[, anotherExistingElement])

Наприклад:

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

Наведений вище код вставить a divперед першим дочірнім елементом вибраного елемента. Перевірте документацію, щоб дізнатись більше.

Інший можливий спосіб вставки елементів перед будь-яким вузлом (включаючи звичайні тексти):

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() розмістить елемент як першу дочірню історію свого батька.

Разом з d3 в Append , selection.append().lower()може повторити JQuery - х PREPEND

Оскільки D3 v4 +, D3 має обидва selection.raise()іselection.lower() методи . Вони використовуються найчастіше для переміщення елементів у SVG, так що певні елементи з’являються поверх інших, де впорядкування елементів SVG у DOM визначає порядок малювання. Але їх можна використовувати для будь-якого елемента в DOM.

Ось коротка демонстрація використання div та абзаців:

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>

Фрагмент приймає div із таким вмістом:

Text
<p> Child Paragraph </p>

І використовує d3, щоб додати новий абзац, а потім опустити його так, щоб структура була такою:

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

І для порівняння з jQuery's 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>

Більше інформації

Selection.lower () реалізований як такий (див. Документи для отримання додаткової інформації):

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