從d3選擇中獲取原始元素

Question

我正在爲使用TypeScript編寫的Power BI構建自定義視覺效果。在我的課程的構造函數中，我寫this.svg = d3.select(this.target).append("svg").attr("id", "svg");（this.target只是包含一個標準的HTML元素，對於這個問題並不重要）。

我的問題是，使用this.svg，我如何才能獲得原始SVG元素？從谷歌搜索，似乎我應該能夠使用this.svg.node()，但一定是有什麼微妙的事情，使得這個不同的「真實」元素......

當我運行console.log(this.svg.node())，其輸出出現完全一樣console.log(document.getElementById("svg"))在Chrome的開發人員窗口中，這很好。

但是，使用表達式this.svg.node().getBoundingClientRect()會導致我的TypeScript無法編譯，因爲出錯Property 'getBoundingClientRect' does not exist on type 'Node'，而document.getElementById("svg").getBoundingClientRect()返回正確的值。

如何獲取this.svg所指的真正原始DOM元素？

我正在使用d3 v3。

Answer 1

.node()正在恢復真元，這裏的問題是，在其他情況下.node()可以返回其他類型的不僅僅是Element的S對象，所以打字稿編譯器無法知道它肯定將有getBoundingClientRect()功能。

解決的辦法是把對象作爲Element類型：

var svgElement = this.svg.node() as Element; 
var boundingRect = svgElement.getBoundingClientRect();