D3.js 前置（类似于 jQuery 前置）答案

【问题标题】：D3.js prepend (similar to jQuery prepend)D3.js 前置（类似于 jQuery 前置）
【发布时间】：2014-12-01 19:10:51
【问题描述】：

我喜欢在 D3 中使用 append，我正在寻找 prepend。

这在 D3 中存在吗？

【问题讨论】：

【解决方案1】：

你可以使用

selection.insert(newElement[, anotherExistingElement])

例如：

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

上面的代码会在选中元素的第一个子元素之前插入一个div。查看documentation了解更多信息。

在任何节点（包括纯文本）之前插入元素的另一种可能方式：

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 中的元素，以便某些元素出现在其他元素之上，其中 DOM 中 SVG 元素的顺序决定了绘制顺序。但是，它们可以用于 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>

sn-p 接受一个包含以下内容的 div：

Text
<p> Child Paragraph </p>

并用d3追加一个新的段落，然后再降低它的结构如下：

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

为了与 jQuery 的 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() 是这样实现的（有关更多信息，请参阅docs）：

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

【讨论】：