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")正在返回计算的＆＃39;元素的宽度（以像素为单位）（在resize事件中也很好用）。

但是，从版本4.9开始，selection.style方法的行为已经改变。

＆＃34;更改selection.style以返回内联样式（如果存在）。＆＃34;

d3.select('#etendues').style("width")现在返回'calc( 100% - 501px)'这是元素的文本内联样式，在我的情况下是不可用的（如果我设置内联宽度样式（以像素为单位），但我不会这样做。我想要那个）。

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

Answer 1

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

存储参考，即const etendues = d3.select('#etendues').node();
使用原生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文档的引用：

d3.js v4.9获取所选元素的计算宽度

1 个答案: