G6 缩进树（Indented）布局完全指南：配置项、方向控制与实战示例

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载导读Indented缩进树布局是 AntV G6 中通过水平缩进量表达树节点层级的经典布局每个节点占据一行或一列天然适合文件目录、组织架构、分类体系等层级感优先的场景。本文以 G6 官方文档中 IndentedLayout 布局指南 为骨架逐项拆解其全部配置项与复杂类型并结合仓库内源码与测试用例演示direction、indent、getSide、dropCap等参数的实际效果读完即可在你的 G6 项目中直接落地一套可运行的缩进树。一、什么是缩进树布局Indented缩进树布局通过水平方向的缩进量来表示树节点的层级。与紧凑盒CompactBox、思维导图Mindmap等层叠放射式布局不同缩进树让每个元素占据一行或一列层级越深缩进越大视觉上像极了代码编辑器里的目录树。其典型适用场景包括文件目录结构可视化如仓库里的文件树组织架构树分类体系展示如算法分类、商品类目任何需要突出层级关系的树状数据从源码角度看G6 的indented布局并非自研实现而是直接复用了antv/hierarchy库中同名布局。在 packages/g6/src/layouts/index.ts 中可以看到export { compactBox, dendrogram, indented, mindmap } from antv/hierarchy;随后该布局被注册进 G6 的内置扩展表在 packages/g6/src/registry/build-in.ts 的layout段中layout: { ... indented: indented as any, ... }因此你在配置中写layout: { type: indented, ... }时G6 会从注册表中取出该实现并执行布局计算无需额外引入或注册任何东西。二、配置项总览IndentedLayout同时支持通用布局配置项和专有配置项完整清单如下来自 IndentedLayout.zh.md属性描述类型默认值必选type布局类型需为indentedindented-✓direction布局方向根节点在左/右/中间详见下文LR \| RL \| HLRindent列间间距支持固定值或函数number \| (d?: Node) number20getWidth获取每个节点宽度仅directionH时生效(d?: Node) number-getHeight获取每个节点高度(d?: Node) number-getSide节点排布在根节点的左/右侧设置后directionH失效(d?: Node) left \| right-dropCap每个节点的第一个子节点是否换行booleantrueisLayoutInvisibleNodes不可见节点是否参与布局preLayouttrue时生效booleanfalsenodeFilter参与该布局的节点(node: NodeData) boolean() truepreLayout使用前布局在初始化元素前计算布局booleanfalseenableWorker是否在 WebWorker 中运行布局boolean-iterations迭代布局的迭代次数number-其中enableWorker、iterations属于布局通用能力preLayout亦如此并非缩进树独有而isLayoutInvisibleNodes、nodeFilter常与折叠/展开场景配合使用用于控制隐藏节点是否参与占位计算。三、核心配置深度解析1. direction根节点的三种摆位direction决定根节点与子树的相对方向LR根节点在左整体向右布局。这是默认值也是文件树最常见的形态——最左侧是根子节点逐级向右缩进。RL根节点在右整体向左布局适合从右往左阅读的场景如某些 RTL 界面。H根节点在中间左右对称分布。子节点被自动分配到左右两侧整体呈鱼骨/梳子状适合根节点需要突出居中的展示。需要特别说明的是getSide一旦设置directionH的自动分侧逻辑即被覆盖详见下文getSide小节。2. indent列间缩进indent控制相邻层级之间的水平间距默认20支持两种写法固定数值所有层级的缩进保持一致例如indent: 40。函数(d?: Node) number可根据节点动态返回缩进值实现某些分支更宽、某些分支更紧凑的自定义效果。文档给出的示例(d) { if (d.parent?.id testId) return d.parent.x 50; return 100; };该函数接收布局中的节点对象可访问d.parent、d.x等属性返回值即该节点与其父节点的水平偏移量。这在目录层级深度差异大、需要按分支控制留白时非常实用。3. getWidth / getHeight按内容自适应尺寸getHeight获取每个节点的高度影响行间距与垂直排布。getWidth获取每个节点的宽度仅在directionH时生效因为水平对称布局需要知道节点宽度才能计算左右分侧占位。两者都支持函数形式常用于按文本内容自适应例如(d) (d.id testId ? 50 : 100);在 case-indented-tree.ts 测试用例中节点宽度甚至通过真实测量文本宽度得出size: (d) [measureText({ text: d.id, fontSize: 12 }) 6, 20],即文字多宽节点就多宽与getWidth按内容自适应的思路一致。4. getSide自定义左右分侧getSide允许你手动指定每个节点落在根节点的哪一侧返回left | right。设置后directionH的自动分侧逻辑失效完全以函数返回值为准(d) (d.id testId ? left : right);这使得重点分支放左侧、其余分支放右侧这类定制化排布变得非常直观。5. dropCap首子节点是否换行dropCap默认true含义是每个节点的第一个子节点是否换到新的一行。dropCap: true所有子节点包括第一个都换行排在父节点下方形成典型的倒 L 形目录树。dropCap: false第一个子节点与父节点保持同一行紧随其后后续子节点再换行视觉上更紧凑适合节点较宽、行数较多的场景。在仓库测试用例 layout-indented.ts 中使用的是默认dropCap行为 direction: LRindent: 30的经典组合。6. 与折叠展开、不可见节点相关的配置isLayoutInvisibleNodes当preLayouttrue时决定不可见如被折叠收起的节点是否仍参与布局占位。默认false表示隐藏节点不占位。nodeFilter筛选参与布局的节点默认全部参与。preLayout是否在初始化元素前预先计算布局适合需要在首帧前拿到坐标的场景。四、完整示例代码1. 子节点自动分布direction: H根节点居中子节点自动左右分布import { Graph, treeToGraphData } from antv/g6; fetch(https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json) .then((res) res.json()) .then((data) { const graph new Graph({ container: container, data: treeToGraphData(data), autoFit: view, layout: { type: indented, direction: H, indent: 80, getHeight: () 16, getWidth: () 32, }, }); graph.render(); });这里有两个关键点treeToGraphData将 JSON 树数据转换为 G6 的图数据G6 官方还内置了treeToGraphData等工具方法导出自 packages/g6/src/exports.ts。direction: H时getWidth生效必须提供节点宽度才能正确分侧。仓库中对应的测试用例 case-indented-tree.ts 正是使用algorithm-category.json数据集位于 packages/g6/tests/dataset/algorithm-category.json并通过treeToGraphData(data)渲染与上面的示例完全同源。2. 子节点右侧分布direction: LR根节点在左所有子节点统一向右分布——最经典的目录树形态// ... 代码同上layout.direction: LR3. 子节点左侧分布direction: RL根节点在右所有子节点统一向左分布// ... 代码同上layout.direction: RL4. 自定义子节点分布getSide手动指定回归、分类两个分支放左侧其余放右侧layout: { type: indented, direction: H, indent: 80, getHeight: () 16, getWidth: () 32, getSide: (d) { if (d.id Regression || d.id Classification) return left; return right; }, }5. 首子节点不换行dropCap: falselayout: { type: indented, direction: LR, indent: 80, getHeight: () 16, getWidth: () 32, dropCap: false, }五、仓库实战从 Demo 到完整缩进树应用如果你需要的不只是静态渲染而是可折叠/展开 可拖拽调整层级的交互式缩进树仓库中的 case-indented-tree.ts 是绝佳的参考实现。该用例展示了缩进树与 G6 扩展机制的深度结合自定义节点继承BaseNode注册了indented节点内置折叠/展开按钮Badge、子节点计数徽标和新增子节点按钮自定义边继承Polyline注册indented边将控制点收敛为[[sx, ty]]实现先水平后垂直的缩进树折线自定义行为注册collapse-expand-tree折叠/展开与drag-branch拖拽节点到其他节点下作为子节点两个行为布局配置layout: { type: indented, direction: LR, isHorizontal: true, indent: 40, getHeight: () 20, getVGap: () 10, },值得注意的是该用例还使用了isHorizontal、getVGap两个参数——它们来自antv/hierarchy布局实现的通用配置其中isHorizontal与direction配合声明水平布局方向getVGap控制兄弟节点垂直间距在官方文档的专有配置表中未单列但从仓库测试用例可以推断其作用。如果你需要精细控制行间距可以尝试它们。此外layout-indented.ts 提供了一个更精简的基线示例使用 file-system.json 文件系统数据direction: LR、indent: 30、getHeight/getWidth返回固定值 16配合edge: { type: polyline }即可得到标准的文件树缩进布局适合作为最小可运行模板。六、性能与工程实践建议综合文档与源码实现落地缩进树时有几点实践建议数据规模较大时开启 WorkerenableWorker: true可将布局计算放入 WebWorker避免阻塞主线程渲染iterations适用于迭代类布局的收敛控制。折叠场景配合preLayout如果使用collapse-expand行为动态收起/展开子树可考虑preLayout: trueisLayoutInvisibleNodes: false让隐藏分支不参与占位布局结果更紧凑。边类型建议缩进树与polyline折线边是天然搭档——仓库所有缩进树用例均使用 polyline 或自定义折线边水平垂直的走线能强化层级关系。direction: H必须提供getWidth水平对称布局依赖节点宽度计算左右占位缺失时布局可能不符合预期。缩进树适合行式层级数据若数据以层级嵌套的 JSON 组织如children数组配合treeToGraphData转换即可直接使用无需手动构建nodes/edges。总结Indented缩进树布局是 G6 中实现文件树 / 组织架构 / 分类目录类可视化最高效的方案之一配置简单type: indented即可启用、方向灵活LR / RL / H 三态、定制能力强indent、getWidth/getHeight、getSide、dropCap均可函数化。通过antv/hierarchy的底层实现与 G6 内置注册build-in.ts开发者无需额外依赖即可开箱即用若需交互能力仓库中的 case-indented-tree.ts 提供了折叠、展开、拖拽改层级的完整范式可直接参考改造进自己的业务中。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 脑图树布局Mindmap完全指南左右双向展开的树布局配置与实战G6 脑图树布局Mindmap完全指南左右双向展开的树布局配置与实战 导读 本文面向使用 G6 进行树形数据可视化思维导图、数据血缘图等的开发者系统数据可视化前端图表库G6 生态树Dendrogram布局完全指南配置、方向与辐射模式实战G6 生态树Dendrogram布局完全指南配置、方向与辐射模式实战 生态树Dendrogram布局是 G6 图可视化框架中面向 层次聚类数据 的经典数据可视化前端图表库G6 力导向布局Force Layout完全指南物理模拟原理、配置项详解与实战示例G6 力导向布局Force Layout完全指南物理模拟原理、配置项详解与实战示例 力导向布局Force Directed Layout是 G6 中最数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考