D3.js - 在選擇之外追加對象

Question

你如何選擇一個 div，然后在它的正下方創建一個新的 div？

 function addContainer(row) { row++ d3.select('body') .append('div') .attr('class', `#container${row}`) .attr("onclick", `addContainer(${row})`) .text("Container " + `${row}`) }

 <div id="container0" onclick="addContainer(0)" >Container 0</div> <script src="https://d3js.org/d3.v5.min.js"></script>

一切正常，除了我希望添加的 div 正好在我點擊的 div 下方而不是最底部的部分。 所以我的想法是，不是選擇主體，而是選擇我點擊的 div 的 id，然后附加一個新的 div。 但是，這會在 div 內而不是在其下方添加一個 div。

那么我如何將它附加到選擇之外或者有更好的方法來做到這一點？

Answer 1

這是一種方法：使用d3.insert 。

由於在 HTML 元素上綁定事件onclick時出現this問題，我已將事件綁定和處理移至 JS 部分。

這就是我將<div>作為下一個兄弟元素附加到所選（單擊）元素的方式： this.parentNode.insertBefore(this.cloneNode(deep), this.nextSibling)

代碼：

 d3.select('#container0').on('click', addContainer); function addContainer(row) { if(!row) row = 0; row++ d3.select(this).select(function () { return this.parentNode.insertBefore(document.createElement('div'), this.nextSibling); }) .attr('class', `#container${row}`) .on('click', function () { addContainer.call(this, row); }) .text("Container " + `${row}`) }

 <div id="container0">Container 0</div> <script src="https://d3js.org/d3.v5.min.js"></script>

注意addContainer.call(this, row)綁定了選擇時使用的this 。

希望這可以幫助。 關於容器編號，它將 +1 添加到綁定元素的編號。 如果您希望容器編號繼續增加，只需在外部聲明該row並在調用函數時將其取出（因為這將有助於div具有唯一的 ID）。 並檢查 DOM 是否正確插入元素。