D3中的選擇：如何使用parentNode.appendChild？

我想使用this method from StackOverflow處理D3.js中重疊的SVG元素。D3中的選擇：如何使用parentNode.appendChild？

但是，由於我的代碼的性質，我想使用D3選擇器而不是this將元素重新添加到DOM。我的問題是：我如何使用D3選擇器來獲取相關節點？

這是最初的例子是如何做的：

this.parentNode.appendChild(this);

這是我的嘗試，它失敗，「遺漏的類型錯誤：無法調用‘的appendChild’的未定義」：

var thisNode = d3.select("#" + id); 
thisNode.parentNode.appendChild(thisNode);

這的jsfiddle（改編自the original example）演示了此問題：http://jsfiddle.net/cpcj5/

如何爲我的D3選擇從不同原始示例中的？我嘗試使用thisNode.node().parentNode.appendChild(thisNode)但也失敗了。

來源

2013-05-07 Richard

.parentNode method用於DOM元素，而不是d3 selection。

訪問從D3選擇的DOM元素是有點棘手，而且經常有更好的方法來達到你想要做什麼。無論如何，如果你有一個單一的元素選擇，這將是一個d3.selection的第一項中的第一個也是唯一項目 - 即你需要訪問它，像這樣：

var someIdDOMelement = d3.select("#someid")[0][0];

你原來的一個編輯的例子使用此：http://jsfiddle.net/cpcj5/1/

如果你有id和特別希望得到的DOM元素，我只是去與getElementById：

var someIdDOMElement = document.getElementById("someid")

看着d3 documentation for binding events using on，我們可以看到，在函數內部你綁定，th e this變量是觸發事件的DOM元素。因此，在處理d3中的事件處理時，您可以使用this從綁定函數中獲取DOM元素。但是，看着你的代碼，我認爲使用原始的JavaScript方法重新附加節點並使用d3.select綁定到this的dom元素的原始實現會更容易。這是原來的代碼是怎麼做的：http://jsfiddle.net/cpcj5/3/

如果你有由此引起的任何困難，請發表評論，所以我可以解決這些問題。

來源

2013-05-08 01:27:58 minikomi

使用'd3.select（「＃someid」）[0] [0]'完美的作品，謝謝！正如'd3.select（「＃someid」）。node（）'如果我記得使用它作爲參數會有。感謝您的解釋。 – Richard 2013-05-08 07:56:32

您還可以在D3使用selection.node（）：

var thisNode = d3.select("#" + id); 
thisNode.node().parentNode.appendChild(thisNode.node());

來源

2016-04-18 07:03:47 ChristianT

D3中的選擇：如何使用parentNode.appendChild？

回答

相關問題