D3.js:如何获得任意元素的计算宽度和高度？

Question

我需要准确知道我的任意g元素的宽度和高度,SVG因为我需要在用户点击它之后在其周围绘制一个选择标记.

我在互联网上看到的是:d3.select("myG").style("width").问题是元素不会总是具有明确的宽度属性集.例如,当我在其中创建一个圆时g,它将具有radious(r)设置而不是宽度.即使我window.getComputedStyle在a上使用该方法circle,它也会返回"auto".

有没有办法计算任意svg元素的宽度D3？

谢谢.

Answer 1

对于SVG元素

使用像selection.node().getBBox()你这样的东西得到像

{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
} 

对于HTML元素

使用 selection.node().getBoundingClientRect()

Answer 2

.getBoundingClientRect()返回一个元素的大小及其相对于viewport的位置.我们可以很容易地得到以下内容

• 左右
• 顶部,底部
• 高度宽度

示例:

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;