javascript - 如何在 Javascript 中访问 d3 svg 图表的当前大小属性？

Question

我已经使用 Bootstrap 制作了 2 列的响应式布局，我的左列有一个 d3 强制布局图表。

以前我使用固定大小，并用它计算另一个函数使用的常量，以确保节点在图表上有合理的位置(我在堆栈上找到的解决方案):

var w = 400,
    h = 400,
    r = 6,
    k = Math.sqrt(nodes.length / (w * h)),
    fill = d3.scale.category20();

var force = d3.layout.force()
    .gravity(100 * k).charge(-10 / k)
    .linkDistance(30)
    .nodes(nodes).links(links)
    .start();

现在我有了响应式布局，我无法使用 w 和 h。相反，我需要某种 getter 来查看图表当前的宽度和高度，以便我可以计算常量。

我是 Javascript 代码新手，所以这是我通过探索控制台想到的最好的结果:

d3.select("#chart").property('height')['animVal']['value']
d3.select("#chart").property('width')['animVal']['value']

我应该这样做吗？有没有更直接的功能？这对我来说看起来很难看..

Answer 1

这取决于代码的其余部分，但通常情况下，您会使用 getBoundingClientRect() 。此函数返回一个只读对象，其中包含所选元素的位置以及宽度和高度。对于您的情况，您可以像这样使用它:

d3.select("#chart").getBoundingClientRect().height
d3.select("#chart").getBoundingClientRect().width