D3.js：如何获取任意元素的计算宽度和高度？对于 SVG 元素对于 HTML 元素

javascript d3.js

2022-08-30 04:18:57

我需要确切地知道我的任意元素的宽度和高度，因为一旦用户单击它，我就需要在它周围绘制一个选择标记。gSVG

我在互联网上看到的是这样的： .问题是元素并不总是具有显式的 width 属性集。例如，当我在内创建一个圆时，它将设置不透射线（）而不是宽度。即使我在 a 上使用该方法，它也将返回“auto”。d3.select("myG").style("width")grwindow.getComputedStylecircle

有没有办法计算任意硒的宽度？svgD3

谢谢。

答案 1

对于 SVG 元素

使用类似的东西，你得到的值，比如selection.node().getBBox()

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

对于 HTML 元素

用selection.node().getBoundingClientRect()

答案 2

.getBoundingClientRect（） 返回元素的大小及其相对于视区的位置。我们可以很容易地得到关注

左、右
顶部、底部
高度、宽度

例：

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