访问Aurelia中SVG组件的尺寸

Question

我将d3应用程序移植到Aurelia并需要访问图表的SVG父级的宽度和高度，以使图表适当地适应当前的屏幕尺寸。

在移植之前，它看起来像这样，正确填满整个容器：

这是Aurelia的样子：

通过调用d3.select('#timeline-svg').style('width')和d3.select('#timeline-svg').style('height')来设置其维度。但是现在，在奥里利亚，每当我称之为它时，无论SVG的尺寸究竟是什么，它都会返回300 x 150的尺寸。我尝试在SVG的div父级（具有相同的维度）上调用相同的代码，但也没有帮助。

然后我想尝试双向数据绑定并将我的SVG标记更改为<svg id="timeline-svg" width.two-way="width"></svg>（并在我的视图模型中声明了相应的width变量），但是我收到错误：{ {1}}

我甚至尝试使用Error: Observation of a "svg" element's "width" property is not supported.，将其注入aurelia-pal并致电：

DOM但是所有这些都是一个空字符串。

有一个要点here（减去d3代码，但我想弄清楚的是如何从app.js中访问app.html中的SVG元素的维度）。我究竟做错了什么？谢谢！

Answer 1

我不确定这是否正是您正在寻找的内容，但您可以使用ref自定义属性来获取svg元素本身的引用。

<svg ref="svgElement"></svg>

然后使用getBBox()功能。该函数的结果将具有您可以使用的width属性。

this.svgElement.getBBox().width

这是一个简单的要点：https://gist.run/?id=0ed86f511533512a22d002675221d812