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

我需要准确地知道我的SVG中任意

g

元素的宽度和高度，因为一旦用户单击它，我需要在它周围画一个选择标记

我在互联网上看到的是这样的：

d3.select（“myG”）.style（“width”）

。问题是元素并不总是有一个显式的宽度属性集。例如，当我在

g

内创建一个圆时，它将设置radious（

r

）而不是宽度。即使我在

圆上使用
window.getComputedStyle
方法，它也会返回“auto”

是否有方法计算
D3
中任意
svg
选择的宽度

谢谢。
了解SVG元素
使用类似于
selection.node（）.getBBox（）
的方法可以得到如下值

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

对于HTML元素
使用
selection.node（）.getBoundingClientRect（）

.getBoundingClientRect（）返回元素的大小及其相对于视口的位置


左，右
上，下
高度、宽度

示例：

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

有一次，当我不知道变量（svg或html）中当前存储了哪个元素时，我遇到了这个问题，但我需要获得它的宽度和高度。我创建了此函数，并希望共享它：

function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGGraphicsElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}

下面隐藏的代码片段中有一个小演示。我们使用相同的函数处理蓝色div和红色svg圆圈上的单击


var svg=d3.选择（'svg'）
.attr（'宽度'，50）
.attr（'height'，50）；
函数计算尺寸（选择）{
变量维度=空；
var node=selection.node（）；
if（SVGElement的节点实例）{
维度=node.getBBox（）；
}否则{
维度=节点。getBoundingClientRect（）；
}
console.clear（）；
控制台日志（尺寸）；
返回维度；
}
var circle=svg
.附加（“圆圈”）
.attr（“r”，20）
.attr（“cx”，30）
.attr（“cy”，30）
.attr（“填充”、“红色”）
.on（“单击”，函数（）{计算尺寸（圆）；}）；
var div=d3.selectAll（“div”）。在（“单击”，function（）{computedDimensions（div）}）上
*{
保证金：0；
填充：0；
边界：0；
}
身体{
背景：#ffd；
}
.分区{
显示：内联块；
背景颜色：蓝色；
右边距：30px；
宽度：30px；
高度：30px；
}

单击蓝色div块或svg圆
对于HTML元素，使用
getBoundingClientRect（）
而不是仅使用SVG
getBBox（）
。类似这样：
d3.select（“body”）.node（）.getBoundingClientRect（）.width
需要更多的信息来帮助。对于SVG或HTML元素？是不是只有Firefox才是问题所在？控制台中有报告吗？返回值是多少？您是否有一个简单的代码示例（JSFIDLE）来演示这个问题？