有一次，当我不知道哪个元素当前存储在我的变量(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;