如何在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才能查看图表的当前width和height，以便我可以计算出我的常数。

我是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