Question

我已经使用2个列的bootstrap做了一个响应式布局，而我的左列有一个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。相反，我需要一些某种吸气剂来查看图表的当前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

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

1 个答案: