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>
