D3.js preend (аналогично jQuery preend)

Ответ 1

Ты можешь использовать

selection.insert(newElement[, anotherExistingElement])

Например:

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

Приведенный выше код вставит 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>

Ответ 2

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>