【问题标题】：D3.js: How to get the computed width and height for an arbitrary element?D3.js：如何获取任意元素的计算宽度和高度？
【发布时间】：2014-03-26 07:09:39
【问题描述】：

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

我在互联网上看到的内容类似于：d3.select("myG").style("width")。问题是元素并不总是具有明确的宽度属性集。例如，当我在g 内创建一个圆时，它将设置radius (r) 而不是宽度。即使我在circle 上使用window.getComputedStyle 方法，它也会返回“auto”。

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

谢谢。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

当我不知道当前存储在我的变量（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;
}

下面隐藏的 sn-p 中的小演示。我们使用相同的功能处理蓝色 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>

【讨论】：

【解决方案2】：

.getBoundingClientRect()返回一个元素的大小和它相对于视口的位置。我们可以很容易地得到关注

左，右
顶部，底部
高、宽

示例：

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

【讨论】：

从 D3 V6 开始仍然有效，谢谢！

【解决方案3】：

对于 SVG 元素

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

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

对于 HTML 元素

使用selection.node().getBoundingClientRect()

【讨论】：

对于 HTML 元素，使用 getBoundingClientRect() 而不是纯 SVG 的 getBBox()。像这样：d3.select("body").node().getBoundingClientRect().width
可以提供更多信息来提供帮助。对于 SVG 或 HTML 元素？只有Firefox是问题吗？控制台中是否报告了任何内容？返回值是多少？您是否有演示问题的最小代码示例（jsfiddle）？