web-dev-qa-db-ja.com

D3.js prepend（jQuery prependと同様）

D3のappendの使用が好きで、prependを探しています。

これはD3に存在しますか？

javascriptd3.jsprepend
66
Mia

使用できます

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>
116
Gilsha

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の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);
});
2
Andrew Reid