D3.js树形图适配SVG画布：无法正确获取树形图尺寸

我明白你现在的困扰：用了preserveAspectRatio和viewBox做响应式SVG后，调用draw.node().getBBox()拿到的尺寸完全不对，导致树形图缩放适配出问题。其实核心原因很简单——getBBox()返回的是SVG内部坐标系（也就是viewBox定义的坐标系）下的尺寸，不是页面实际渲染的像素尺寸，而你用的preserveAspectRatio="xMinYMin meet"会自动缩放SVG来适配容器，这两个坐标系之间存在缩放比例差，所以直接用BBox的数值肯定不对。

下面一步步给你解决方法：

1. 计算SVG的实际缩放比例 #

首先我们要算出SVG内部坐标系到页面实际坐标系的缩放系数，因为你用了meet模式，缩放比例是取宽高方向中能完整适配容器的那个：

// 获取SVG元素和它的实际渲染尺寸
const svg = d3.select('svg').node();
const svgRenderRect = svg.getBoundingClientRect();
// 获取viewBox的原始尺寸
const viewBox = svg.viewBox.baseVal;
const viewBoxW = viewBox.width;
const viewBoxH = viewBox.height;

// 计算宽高方向的缩放比例
const scaleX = svgRenderRect.width / viewBoxW;
const scaleY = svgRenderRect.height / viewBoxH;
// meet模式下取较小的那个作为实际缩放比例
const svgActualScale = Math.min(scaleX, scaleY);

2. 修正树形图的实际尺寸 #

现在拿到draw节点的BBox后，乘以刚才的缩放比例，就能得到它在页面中实际渲染的尺寸。另外还要考虑你给vis节点加的zoom缩放，所以要把这部分缩放也加上：

// 获取draw节点的BBox（viewBox坐标系下）
const drawBBox = d3.select('.draw').node().getBBox();
// 获取vis节点当前的缩放比例（从transform属性解析）
const visTransform = d3.select('.vis').attr('transform');
const visScaleMatch = visTransform.match(/scale\(([\d.]+)\)/);
const visCurrentScale = visScaleMatch ? parseFloat(visScaleMatch[1]) : 1;

// 计算draw节点在页面中的实际渲染尺寸
const actualDrawW = drawBBox.width * svgActualScale * visCurrentScale;
const actualDrawH = drawBBox.height * svgActualScale * visCurrentScale;

3. 适配树形图到SVG容器 #

有了正确的尺寸后，你就可以计算合适的缩放比例，让树形图适配SVG的可用空间（要避开标题和图例的位置）：

// 假设标题高度是40，图例高度是60，根据你的实际布局调整
const availableW = svgRenderRect.width;
const availableH = svgRenderRect.height - 40 - 60;

// 计算能让树形图完整适配的缩放比例
const fitScale = Math.min(availableW / (drawBBox.width * svgActualScale), availableH / (drawBBox.height * svgActualScale));

// 应用缩放和偏移到vis节点，避开标题
d3.select('.vis')
  .attr('transform', `translate(0, 40) scale(${fitScale})`);

关键提示 #

• 如果你有树形图节点展开/折叠的交互，记得在每次布局更新后重新执行上述尺寸计算和适配逻辑。
• getBBox()不会考虑父元素的transform（比如vis的scale），所以必须手动叠加这些变换的影响。
• 你的初始translate(' + (width-rectW)/2 + ',' + 100 + ')是在viewBox坐标系下的，所以在适配时不用额外调整这部分，只要保证最终的缩放是作用在vis节点上即可。

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