d3可折叠树如何根据动态树形结构自动计算dy与width参数

针对树形结构动态变化时，固定dy、width无法适配的问题，可以通过统计树形结构的核心属性自动计算对应值，具体实现如下：

1. 统计树形结构核心属性 #

先将动态JSON转换为D3层级结构，统计两个关键值：

• 树的最大深度：控制水平方向总宽度
• 同一层级的最大节点数：控制垂直方向节点间距

// 处理动态JSON为D3层级结构
const root = d3.hierarchy(yourDynamicJson, d => d.children);
// 获取树的最大深度
const treeMaxDepth = root.height;
// 统计每个层级的节点数量，取最大值
const levelNodeMap = new Map();
root.each(node => {
  const currentLevel = node.depth;
  levelNodeMap.set(currentLevel, (levelNodeMap.get(currentLevel) || 0) + 1);
});
const maxNodePerLevel = Math.max(...levelNodeMap.values());

2. 动态计算dy和width #

可以根据业务需要自定义边距、每层水平间距参数，适配不同的展示需求：

// 自定义参数可调整
const verticalPadding = 40; // 上下总边距
const horizontalPadding = 60; // 左右总边距
const perLevelWidth = 120; // 每层节点分配的水平宽度
const containerAvailableHeight = 1200; // 渲染容器的可用高度，也可直接获取DOM实际高度

// 计算dy：垂直方向每个节点的间距，避免节点重叠
const dy = (containerAvailableHeight - verticalPadding) / maxNodePerLevel;
// 计算width：画布总宽度，适配最深层级
const width = treeMaxDepth * perLevelWidth + horizontalPadding;

3. 适配D3树布局 #

将计算后的值传入D3树布局即可，每次树形结构（含折叠/展开交互）变化时，重新执行上述逻辑计算再重绘，即可实现全场景适配。

// 替换原固定值传入布局
const treeLayout = d3.tree()
  .size([width, containerAvailableHeight])
  .nodeSize([dy, perLevelWidth]);

// 生成节点坐标
treeLayout(root);

内容的提问来源于stack exchange，提问作者Rashmitha N K