如何使用D3.js获取设置百分比宽高的SVG元素实际尺寸？

当SVG的width和height设置为百分比时，attr()方法只会返回你设置的字符串值（比如"100%"），无法拿到实际像素尺寸。你可以通过以下几种方法获取SVG的真实渲染尺寸：

方法1：使用getBoundingClientRect() #

直接获取SVG DOM元素的布局尺寸，这个方法会返回元素在页面中实际占据的宽高（像素值）：

// 获取SVG对应的DOM节点
var svgNode = d3.select("svg").node();
// 获取实际布局尺寸
var svgRect = svgNode.getBoundingClientRect();
var margin = 100;
// 计算可用宽高（减去边距）
var width = svgRect.width - margin;
var height = svgRect.height - margin;

方法2：直接读取父容器尺寸 #

因为SVG设置了100%占满父div，所以父容器的尺寸就是SVG的实际尺寸：

var parentNode = d3.select("svg").node().parentNode;
var margin = 100;
var width = parentNode.offsetWidth - margin;
var height = parentNode.offsetHeight - margin;

响应式场景处理 #

如果父div尺寸会随窗口变化，建议监听resize事件动态更新尺寸：

function updateChartDimensions() {
  var svgNode = d3.select("svg").node();
  var svgRect = svgNode.getBoundingClientRect();
  var margin = 100;
  var width = svgRect.width - margin;
  var height = svgRect.height - margin;

  // 这里添加更新图表的逻辑，比如重绘坐标轴、调整图形大小等
}

// 初始化时执行一次
updateChartDimensions();
// 监听窗口 resize 事件
window.addEventListener("resize", updateChartDimensions);

内容的提问来源于stack exchange，提问作者utenteciao utente