Js: 如何得到任意元素的计算宽度和高度？

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

我在互联网上看到的是这样的: d3.select("myG").style("width")。问题是元素并不总是有一个显式的 width 属性集。例如，当我在 g中创建一个圆时，它将设置为半径(r)而不是宽度。即使我在 circle上使用 window.getComputedStyle方法，它也会返回“ auto”。

有没有办法计算 D3中任意 svg单元的宽度？

谢谢你。

125313 次浏览
小开
最佳答案

对于 SVG 元素

使用类似 selection.node().getBBox()的函数可以得到类似

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

对于 HTML 元素

使用 selection.node().getBoundingClientRect()

小开

. getbound ingClientRect () 返回元素的大小及其相对于视图的位置

  • 左，右
  • 上面，下面
  • 高度，宽度

例如:

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.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>


提交答案