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

我喜欢D3中append的用法，并且正在寻找前置。

这在D3中存在吗？

您可以使用

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>

Selection.lower（）

selection.lower() 将放置一个元素作为其父元素的第一个子元素。

加上D3的追加，selection.append().lower()可复制jQuery的前置

由于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>

该代码段包含一个具有以下内容的div：

Text
<p> Child Paragraph </p>

并使用d3附加一个新段落，然后将其降低，以便其结构如下：

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

为了与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>

更多信息

selection.lower（）是这样实现的（有关更多信息，请参阅文档）：

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