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

我需要知道SVG任意一个g元素的宽度和高度,因为一旦用户点击了它,我们需要在它周围画一个select标记。

我在网上看到的是类似于: d3.select("myG").style("width") 。 问题是元素不会总是有一个明确的宽度属性集。 例如,当我在g创build一个圆时,它将具有radious( r )而不是宽度。 即使我在一个circle上使用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; 

一旦我遇到了这个问题,当我不知道当前存储在我的variables(SVG或HTML)的元素,但我需要得到它的宽度和高度。 我创build了这个function,并希望分享它:

 function computeDimensions(selection) { var dimensions = null; var node = selection.node(); if (node instanceof SVGElement) { // check if node is svg element dimensions = node.getBBox(); } else { // else is html element dimensions = node.getBoundingClientRect(); } console.log(dimensions); return dimensions; } 

在下面的隐藏片段中的小演示。 我们处理点击蓝色的div和红色svg圆上的相同的function。

 var svg = d3.select('svg') .attr('width', 50) .attr('height', 50); function computeDimensions(selection) { var dimensions = null; var node = selection.node(); if (node instanceof SVGElement) { dimensions = node.getBBox(); } else { dimensions = node.getBoundingClientRect(); } console.clear(); console.log(dimensions); return dimensions; } var circle = svg .append("circle") .attr("r", 20) .attr("cx", 30) .attr("cy", 30) .attr("fill", "red") .on("click", function() { computeDimensions(circle); }); var div = d3.selectAll("div").on("click", function() { computeDimensions(div) }); 
 * { margin: 0; padding: 0; border: 0; } body { background: #ffd; } .div { display: inline-block; background-color: blue; margin-right: 30px; width: 30px; height: 30px; } 
 <h3> Click on blue div block or svg circle </h3> <svg></svg> <div class="div"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>