G6 生态树（Dendrogram）布局完全指南：配置、方向与辐射模式实战

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载生态树Dendrogram布局是 G6 图可视化框架中面向层次聚类数据的经典树形布局其核心特点是所有子节点处于同一层级、忽略节点尺寸每个节点按 1px 处理非常适合表达分类体系、算法族谱、基因谱系等层次结构。读完本文你将掌握该布局的全部配置项方向、间距、辐射模式、它与treeToGraphData数据转换的配合方式以及如何结合源码理解其底层实现。布局概述什么是生态树布局生态树布局适用于层次聚类数据的可视化。与 紧凑盒CompactBox布局 等其他树形布局相比它的显著特征有三个所有子节点布局在同一层级同一父节点的直接子节点全部对齐到同一水平或垂直线上视觉上呈现等高的层状结构不考虑节点大小布局计算时不读取节点的宽高避免节点尺寸差异导致层级错位每个节点被当成 1px 处理参与布局计算的节点统一按 1 个像素点看待因此整体结构紧凑、规则尤其适合节点数量较多的树。这一特性决定了它在节点大小差异大、需要按尺寸展示的场景下此时更适合 MapNodeSize 等变换 配合其他布局需要谨慎选用而在追求整齐层级的分类树场景中则非常合适。快速上手最小配置示例在 G6 中通过Graph构造参数里的layout字段即可启用生态树布局type固定为dendrogramconst graph new Graph({ container: container, data, // 由 treeToGraphData 转换后的图数据 layout: { type: dendrogram, direction: LR, // 布局方向默认 LR nodeSep: 30, // 同一层级节点间距px rankSep: 250, // 不同层级间距px radial: false, // 是否启用辐射状布局 }, }); graph.render();这是官方文档给出的最小配置骨架其中direction、nodeSep、rankSep、radial四个参数共同决定了整棵树的形态下文逐一详解。配置项详解Options配置项总表属性描述类型默认值必选type布局类型dendrogram-✓direction布局方向可选值见下文LR|RL|TB|BT|H|VLRnodeSep节点间距即同一层级节点之间的距离单位像素number20rankSep层级间距即不同层级之间的距离单位像素number200radial是否启用辐射状布局说明见下文booleanfalse说明nodeSep与rankSep均以像素为单位。从源码结构看dendrogram布局的实现来自antv/hierarchy包见 packages/g6/src/layouts/index.ts 的export { compactBox, dendrogram, indented, mindmap } from antv/hierarchy这两个参数控制的是布局计算坐标系中的间距值实际渲染时还需结合视口缩放zoom综合感知。direction六种布局方向树布局的方向选项共 6 种决定了根节点位置与树展开方向TB根节点在上向下逐层布局。适合自上而下的组织结构图、决策树BT根节点在下向上逐层布局。适合自下而上表达汇聚关系的树LR根节点在左向右逐层布局。横向空间利用率高标签阅读方向自然是默认方向RL根节点在右向左逐层布局与LR镜像对称H根节点在中间左右水平对称布局左右两侧子树镜像展开V根节点在中间上下垂直对称布局上下两侧子树镜像展开。方向选择直接决定了与之匹配的边类型与标签摆放策略横向方向LR/RL通常搭配cubic-horizontal边纵向方向TB/BT搭配cubic-vertical边详见下文实战示例。radial辐射状布局模式radial用于启用辐射状放射状布局模式。启用后节点不再沿直线方向展开而是以根节点为中心按层级呈同心圆环分布层数越深的节点离根节点越远同层节点分布在同一圆环上。使用建议文档原话若radial设置为true建议将direction设置为LR或RL以获得最佳效果。原因在于辐射模式下节点沿根节点四周的角度铺开LR/RL这类单侧展开方向能保证子树的扇区划分连续不重叠视觉最均衡。辐射形态与 case-radial-dendrogram.ts 这类径向树场景天然契合也可配合 PlaceRadialLabels 变换 优化标签排布。源码级原理dendrogram 在 G6 中的实现链路内置注册与导出从源码可以确认生态树布局是 G6 的内置布局之一无需手动注册即可使用导出实现dendrogram布局函数由antv/hierarchy提供并统一导出见 packages/g6/src/layouts/index.ts注册到内置扩展表在 packages/g6/src/registry/build-in.ts 的layout分类下注册了dendrogram: dendrogram as any同表还包括compact-box、mindmap、indented等树形布局加载内置扩展registerBuiltInExtensions()会遍历该表并逐一register(layout, type, extension)见 packages/g6/src/registry/build-in.ts因此new Graph({ layout: { type: dendrogram } })开箱即用。通用布局选项BaseLayoutOptionsdendrogram作为布局家族成员同样继承 G6 的通用布局配置见 packages/g6/src/layouts/types.ts在实战中这些选项与树形布局配合密切preLayout: boolean是否在初始化元素之前预计算布局。开启后元素首次渲染即处于最终位置避免先乱后正的跳动测试示例中普遍设置为truenodeFilter / comboFilter过滤参与布局的节点/combowidth / height布局区域尺寸默认取画布宽高enableWorker: boolean是否在 Web Worker 中运行布局适用于大规模树animation: boolean是否启用布局动画过渡。注意preLayout不适用于流水线pipeline布局且isLayoutInvisibleNodes不可见节点是否参与布局仅在preLayout为true时生效这是源码中明确标注的约束。完整实战数据准备与可运行示例树形数据转换 treeToGraphDataG6 的图数据结构nodesedges与树形数据结构children嵌套不同使用生态树布局前需要先将树形数据转换为图数据。G6 提供了内置工具函数treeToGraphDataimport { Graph, treeToGraphData } from antv/g6; // data 为嵌套 children 的树形 JSON如仓库测试数据集 // packages/g6/__tests__/dataset/algorithm-category.json const data treeToGraphData(treeData); const graph new Graph({ container: container, autoFit: view, data, layout: { type: dendrogram, /* ... */ }, });仓库中的官方示例均使用algorithm-category.json数据集该文件位于 packages/g6/tests/dataset/algorithm-category.json结构为多级嵌套的算法分类树非常适合演示生态树效果。示例一LR 横向生态树对应官方示例 basic.js 与测试用例 layout-dendrogram-basic.tsconst graph new Graph({ container: container, autoFit: view, data: treeToGraphData(data), node: { style: { labelText: (d) d.id, // 非叶子节点标签放左侧叶子节点放右侧贴合 LR 展开方向 labelPlacement: (d) (d.children?.length ? left : right), labelBackground: true, // 锚点放在左右两侧供边连接 ports: [{ placement: right }, { placement: left }], }, }, edge: { type: cubic-horizontal, // 横向三次贝塞尔边与 LR 方向匹配 }, layout: { type: dendrogram, direction: LR, // H / V / LR / RL / TB / BT nodeSep: 36, rankSep: 250, preLayout: true, }, behaviors: [drag-canvas, zoom-canvas, drag-element, collapse-expand], }); graph.render();示例二TB 纵向生态树对应官方示例 vertical.js 与测试用例 layout-dendrogram-tb.ts。纵向布局时锚点应改放上下两侧边改为cubic-vertical为避免叶子节点标签过长挤压布局可对叶子标签做 90° 旋转const graph new Graph({ container: container, autoFit: view, data: treeToGraphData(data), node: { style: (d) { const isLeafNode !d.children?.length; const style { labelText: d.id, labelPlacement: right, labelOffsetX: 2, labelBackground: true, ports: [{ placement: top }, { placement: bottom }], }; if (isLeafNode) { Object.assign(style, { labelTransform: [[rotate, 90], [translate, 18]], labelBaseline: center, labelTextAlign: left, }); } return style; }, }, edge: { type: cubic-vertical, }, layout: { type: dendrogram, direction: TB, // H / V / LR / RL / TB / BT nodeSep: 50, rankSep: 120, preLayout: true, }, behaviors: [drag-canvas, zoom-canvas, drag-element, collapse-expand], }); graph.render();示例三radial 辐射状生态树对应官方示例 radial.js 与测试用例 layout-dendrogram-radial.ts。辐射模式无需指定direction即可工作默认LR只需开启radialconst graph new Graph({ container: container, autoFit: view, data: treeToGraphData(data), node: { style: { labelText: (d) d.id, labelBackground: true, }, }, layout: { type: dendrogram, radial: true, // 以根节点为中心辐射状分布 nodeSep: 40, rankSep: 140, }, behaviors: [drag-canvas, zoom-canvas, drag-element], }); graph.render();单元测试验证仓库在 packages/g6/tests/unit/layouts/dendrogram.spec.ts 中为生态树布局编写了快照测试basic用例渲染 LR 方向布局、tb用例渲染 TB 方向布局均通过toMatchSnapshot与渲染快照比对保证了文档所描述的方向与形态行为的正确性。搭配建议与最佳实践边类型与方向匹配横向方向LR/RL搭配cubic-horizontal边纵向方向TB/BT搭配cubic-vertical边视觉上折线最平滑这是官方示例与测试用例的统一做法。锚点ports跟随方向节点 style 中通过ports声明边的连接点横向布局配置left/right纵向布局配置top/bottom保证边从正确方向伸出。标签策略LR布局下将非叶子节点标签放左侧、叶子放右侧可避免与子树的边重叠纵向布局中叶子标签旋转 90° 可显著节省纵向空间。开启preLayout: true让布局在元素初始化前完成首帧即稳定官方示例均如此配置大规模树可进一步考虑enableWorker: true将计算移入 Web Worker。配合折叠展开行为collapse-expand行为见 packages/g6/src/behaviors/collapse-expand.ts在生态树中可直接用于展开/收起子树适合交互式探索大层级树。注意节点尺寸约束生态树节点按 1px 处理的机制意味着它不感知节点大小差异。若你的节点尺寸差异大且需要据此排布应改用其他布局或配合尺寸映射变换。生态树布局是 G6 布局体系中形态最规整、最易读的树形方案之一。理解direction与radial两个核心开关再辅以边类型、标签与锚点的方向化配置即可快速构建出专业级的分类树、谱系树与径向树可视化应用。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 生态树Dendrogram布局实战指南方向、间距与径向模式配置详解G6 生态树Dendrogram布局实战指南方向、间距与径向模式配置详解 导读 本文围绕 G6AntV 图可视化框架内置的 dendrogram 生态数据可视化前端图表库G6 生态树 Dendrogram 布局配置详解与源码级实践指南G6 生态树 Dendrogram 布局配置详解与源码级实践指南 导读 生态树Dendrogram是 AntV G6 中用于层次聚类数据可视化的树形布局数据可视化前端图表库G6 生态树布局Dendrogram实战指南配置详解与源码级原理G6 生态树布局Dendrogram实战指南配置详解与源码级原理 生态树Dendrogram是 G6 内置的树图布局之一专为层次聚类数据的可视化设计数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考