javascript - 使用 D3.js 从元素获取宽度

Question

这是我的html:

<div class="bar no" style="width: 25.0916%;"></div>

我想以数字或百分比的形式访问宽度大小。

我尝试了以下一些方法，但第一个不返回任何内容，第二个返回以像素为单位的数字。

width = this.getBBox().width

width = d3.select(this).style("width")

我可以用什么来返回 500 或 25.0%？

Answer 1

比较以下:

console.log('Computed style width as pixels: ');
console.log(d3.select('.bar').style('width'));
console.log('Computed style width as a number: ');
console.log(parseFloat(d3.select('.bar').style('width')));
console.log('As a percent: ');
console.log(d3.select('.bar').node().style.width);
console.log('Actual width as number: ');
console.log(d3.select('.bar').node().offsetWidth);

<script src="https://d3js.org/d3.v4.js"></script>
<div class="bar no" style="width: 25.0916%;"></div>