Question

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

这是否存在于D3？

Answer 1

您可以使用

selection.insert(newElement[, anotherExistingElement])

例如：

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

上面的代码将在所选元素的第一个子元素之前插入div。查看documentation了解详情。

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

＆＃13;

var parentEl = d3.select("div").node();
parentEl.insertBefore(document.createElement("div"), parentEl.childNodes[0]);

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<div>
  This is a plain text
  <a></a>
</div>

＆＃13;

Answer 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>

该代码段包含以下内容的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（）是这样实现的（有关更多信息，请参见docs）

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