d3.js实现的Dendrogram系统树图如何动态设置宽高适配内容？

核心思路 #

取消固定宽高的提前定义，先完成层级数据的计算/布局，再根据实际内容需要的尺寸设置画布宽高，避免内容裁切。

实现方式 #

方式1：基于层级数据特征计算（最简单高效，适配常规树状图场景） #

D3树状图的尺寸仅由两个核心数据决定：叶子节点总数（决定纵向容纳空间）、树的最大深度（决定横向容纳空间），直接结合你预设的节点尺寸、间隔即可算出实际需要的画布大小：

// 1. 先将原始数据转换为d3层级结构
const root = d3.hierarchy(你的原始层级数据);
// 2. 获取叶子节点总数、树的最大深度
const leafCount = root.leaves().length;
const maxDepth = root.height;

// 3. 结合你定义的参数计算动态宽高
const dynamicHeight = leafCount * (boxHeight + gap.height) + margin.top + margin.bottom;
const dynamicWidth = (maxDepth + 1) * (boxWidth + gap.width) + margin.left + margin.right;

// 4. 用计算出的宽高初始化SVG画布即可
const svg = d3.select('你的画布容器选择器')
  .attr('width', dynamicWidth)
  .attr('height', dynamicHeight);

方式2：基于布局计算后的节点坐标极值计算（适配性更强，适合自定义排布规则的场景） #

如果你的节点有自定义偏移、非均匀排布的规则，可以先让d3的树布局完成所有节点的坐标计算，再取坐标最大值推导画布尺寸：

// 1. 转换层级结构
const root = d3.hierarchy(你的原始层级数据);
// 2. 初始化布局时先给一个足够大的临时尺寸，避免计算阶段就出现裁切
const clusterLayout = d3.cluster()
  .size([10000, 10000]);
// 3. 执行布局计算，得到所有节点的坐标
clusterLayout(root);

// 4. 遍历所有节点，取坐标的最大值
let maxX = 0, maxY = 0;
root.each(node => {
  maxX = Math.max(maxX, node.x);
  maxY = Math.max(maxY, node.y);
});

// 5. 计算实际需要的宽高，额外加上节点本身的尺寸避免边缘内容裁切
const dynamicWidth = maxX + boxWidth + margin.left + margin.right;
const dynamicHeight = maxY + boxHeight + margin.top + margin.bottom;

// 6. 初始化SVG画布
const svg = d3.select('你的画布容器选择器')
  .attr('width', dynamicWidth)
  .attr('height', dynamicHeight);

额外优化建议 #

如果担心内容过多时画布尺寸太大撑破页面，可以给SVG的外层容器添加滚动样式：

.svg-container {
  overflow: auto;
  max-height: 800px; /* 可自定义最大可视高度 */
  max-width: 100%; /* 可自定义最大可视宽度 */
}

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