javascript - d3.js v4.9 获取选定元素的计算宽度

Question

我正在使用 d3.js 库来创建 SVG 图表。我使用 SVG 元素的宽度来确定 x.range、x 轴……)

<svg id="etendues" style="display:inline-block;width: calc( 100% - 501px);min-height:300px;float:left;"></svg>
...
let margin = {top: 20, right: 20, bottom: 20, left: 40};
let width = parseInt(d3.select('#etendues').style("width")) - margin.left - margin.right;

d3.js 4.7.4 一切正常。如d3.select('#etendues').style("width")返回元素的“计算”宽度(以像素为单位)(在调整大小事件中也能很好地工作)。

但是，自从版本 4.9 Selection.style 方法的行为已更改。

"Change selection.style to return the inline style, if present."

d3.select('#etendues').style("width")现在返回 'calc( 100% - 501px)'这是元素的文本内联样式，在我的情况下不可用(如果我以像素为单位设置内联宽度样式，它就可以工作，但我不希望这样)。

是否有解决方法来获取获取元素的实际计算宽度(以像素为单位)的旧行为？

Answer 1

您可以使用 d3 的 selection.node 简单地访问元素的 DOM 节点(即 d3.select(...).node() )，然后使用 window.getComputedStyle(elem).getPropertyValue(<prop>)获取计算出的宽度 ^{1 , 2} 。对于您的情况，您可以:

1. 存储引用，即 const etendues = d3.select('#etendues').node();
2. 使用原生JS获取宽度:
   • window.getComputedStyle(etendues).getPropertyValue('width') ，或
   • window.getComputedStyle(etendues).width

记住使用 parseInt() ，因为它将返回一个像素值——不过你已经这样做了，所以一切都很好:)

要结束它，您可以使用以下代码:

const etendues = d3.select('#etendues').node();
let margin = {top: 20, right: 20, bottom: 20, left: 40};
let width = parseInt(window.getComputedStyle(etendues).width) - margin.left - margin.right;

这是一个稍作修改的概念验证示例，旨在简单地将检索到的宽度记录到控制台:

const etendues = d3.select('#etendues').node();
console.log(parseInt(window.getComputedStyle(etendues).width));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg id="etendues" style="display:inline-block;width: calc( 100% - 501px);min-height:300px;float:left;"></svg>

引用 MDN 文档:

1. window.getComputedStyle
2. window.getPropertyValue