从 d3 选择中获取原始元素

Question

我正在为 Power BI 构建一个用 TypeScript 编写的自定义视觉对象。在我的类的构造函数中，我写了

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())

时，它的输出与 Chrome 开发者窗口中的

console.log(document.getElementById("svg"))

完全相同，所以这很好。

但是，使用表达式

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

，因此打字稿编译器无法知道它肯定会有

getBoundingClientRect() 

功能。

解决方案是将对象转换为类型

Element

:

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