120

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

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

有没有一种方法可以计算中的任意svg隔离的宽度D3？

谢谢。

javascript d3.js

— 安德烈·佩纳（AndréPena）
source

225

对于SVG元素

使用类似的东西selection.node().getBBox()会得到类似的价值

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

对于HTML元素

用 selection.node().getBoundingClientRect()

— 克里斯托弗·哈克特（Christopher Hackett）
source

36

对于HTML元素，请使用，getBoundingClientRect()而不要使用SVG-only getBBox()。像这样：d3.select("body").node().getBoundingClientRect().width

— Toph'2

1

可以提供更多的信息来帮助您。对于SVG或HTML元素？只是Firefox是问题所在吗？控制台中是否有报告？返回值是多少？您是否有演示该问题的最小代码示例（jsfiddle）？

— 克里斯托弗·哈克特

29

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

左右
顶部，底部
高度宽度

范例：

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

— 马利克·哈利勒（Malik Khalil）
source

1

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

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圆上的单击。

显示代码段

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>

展开摘要

— 米哈伊尔·沙布里科夫（Mikhail Shabrikov）
source

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

对于SVG元素

对于HTML元素