在Aurelia中访问SVG组件的尺寸 [英] Accessing dimensions of SVG component in Aurelia

问题描述

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

在移植之前，它看起来像这样，正确地填充了整个容器:

这是在Aurelia中的样子:

它通过调用d3.select('#timeline-svg').style('width')和d3.select('#timeline-svg').style('height')设置尺寸.但是现在，在Aurelia中，无论我叫什么尺寸，它都会返回300 x 150的尺寸，而不管SVG的尺寸到底是多少.我尝试在SVG的div父对象(具有相同的尺寸)上调用相同的代码，但这也无济于事.

因此，我当时想尝试双向数据绑定，并将SVG标签更改为<svg id="timeline-svg" width.two-way="width"></svg>(并在视图模型中声明了相应的width变量)，但出现了错误:Error: Observation of a "svg" element's "width" property is not supported.

我什至尝试使用aurelia-pal，将其注入为DOM并调用:

attached() {console.log(this.DOM.getElementById("timeline-svg").style.width);}，但所有给我的都是空字符串.

有一个要点此处(减去d3代码，但我想弄清楚的是如何以从app.js中访问app.html中SVG元素的尺寸).我究竟做错了什么?谢谢！

解决方案

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

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

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

this.svgElement.getBBox().width

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

I'm porting over a d3 application into Aurelia and need to access the width and height of the chart's SVG parent in order to fit the chart properly to the current screen dimensions.

Before porting, it looked like this, filling up the whole container properly:

This is what it looks like in Aurelia:

It sets its dimensions by calling d3.select('#timeline-svg').style('width') and d3.select('#timeline-svg').style('height'). But now, in Aurelia, whenever I call those it returns dimensions of 300 x 150, no matter what the dimensions of the SVG actually are. I tried calling the same code on the SVG's div parent (which has identical dimensions) and that didn't help either.

So then I thought to try two-way data binding and changed my SVG tag to <svg id="timeline-svg" width.two-way="width"></svg> (and declared a corresponding width variable in my view-model), but I get the error: Error: Observation of a "svg" element's "width" property is not supported.

I've even tried using aurelia-pal, injecting it as DOM and calling:

attached() {console.log(this.DOM.getElementById("timeline-svg").style.width);} but all that gives me is an empty string.

There's a gist here (minus the d3 code, but all I want to figure out is how to access the dimensions of the SVG element in app.html from within app.js). What am I doing wrong? Thanks!

解决方案

I'm not sure if this is exactly what you're looking for, but you could use the ref custom attribute to get a reference the svg element itself.

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

Then use the getBBox() function. The result of that function will have a width property you can use.

this.svgElement.getBBox().width

Here's a simple gist example: https://gist.run/?id=0ed86f511533512a22d002675221d812

这篇关于在Aurelia中访问SVG组件的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！