D3.js前置(类似于jQuery prepend)

Question

我喜欢在D3中使用append,我正在寻找前置.

D3中是否存在这种情况？

Answer 1

您可以使用selection.insert(name [,Before]),其中name是元素名称,before是选择器.
例如 -

selection.insert(newElement[, anotherExistingElement])

上面的代码将在所选元素的第一个子元素之前插入一个div.你可以在这里参考更多

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

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

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

Answer 2

选择.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 的 prepend 进行比较：

Text
<p> Child Paragraph </p>

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

更多信息

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

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