D3.js：如何获得任意元素的计算宽度和高度？ [英] D3.js: How to get the computed width and height for an arbitrary element?

问题描述

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

I need to know exactly the width and height for an arbitrary g element in my SVG because I need to draw a selection marker around it once the user has clicked it.

我在互联网上看到的是： d3.select（ MYG）。式（ 宽度）。问题是元素不会总是具有明确的宽度属性集。例如，当我在 g 中创建一个圆圈时，它将设置为radious（ r ）而不是宽度。即使我在圈上使用 window.getComputedStyle 方法，它也会返回auto。

What I've seen in the internet is something like: d3.select("myG").style("width"). The problem is that the element will not always have an explicit width attribute set. For instance, when I create a circle inside the g, it will have the radious (r) set instead of the width. Even if I use the window.getComputedStyle method on a circle, it will return "auto".

有没有办法计算 D3 svg 元素的宽度c>？

Is there a way to calculate the width of an arbitrary svg selement in D3?

谢谢。

推荐答案

对于SVG元素

使用像 selection.node（）。getBBox（）这样的值，你会得到像

For SVG elements

Using something like selection.node().getBBox() you get values like

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

对于HTML元素

使用 selection.node（）。getBoundingClientRect（）

这篇关于D3.js：如何获得任意元素的计算宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！