X6 树布局实战基于 antv/hierarchy 的脑图树渲染指南【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6本文以 X6 仓库中 site/examples/layout/tree 示例页为核心讲解如何在 X6 图编辑器中实现树形脑图布局先用antv/hierarchy的Hierarchy.mindmap()完成树形坐标计算再把布局结果转换为 X6 的 JSON 数据模型并通过graph.fromJSON()渲染。读完本文你将掌握树布局两段式流水线布局计算 图渲染、mindmap 布局的完整参数配置以及如何在 X6 中把树状 JSON 递归转换为节点与边。示例页面结构与定位该示例在站点导航中位于 Layout布局分类下index.en.md的 frontmatter 声明了页面元信息title: Tree Layout、order: 11并设置redirect_from: /en/examples/layout说明它由旧路径重定向而来。与其并列的还有 site/examples/layout/general包含 circle、force、grid、dagre 等通用布局本页则专门演示树形布局。示例目录的实际内容由三部分构成文件作用index.en.md页面 frontmatter标题、排序、重定向demo/meta.json演示元数据注册名为Mindmap的 demo对应mindmap.tsdemo/mindmap.ts核心演示代码层次布局 X6 渲染的完整实现也就是说示例页的正文就是demo/mindmap.ts这份可运行的代码本篇文章将逐行拆解它。树布局的核心思路布局与渲染解耦mindmap.ts的第一行揭示了关键设计import { Graph, Model } from antv/x6 import Hierarchy from antv/hierarchyX6 本身是一个图渲染引擎负责节点、边的绘制与交互而树形坐标的布局计算交给独立的antv/hierarchy库完成。这是一个典型的两段式流水线布局阶段把树形 JSON 交给Hierarchy.mindmap()得到每个节点的x、y坐标渲染阶段递归遍历布局结果把节点与父子关系转换为 X6 的 JSON 模型{ nodes, edges }交给graph.fromJSON()一次性渲染。依赖版本方面站点工程 site/package.json 声明antv/hierarchy: ^0.6.6示例工程 examples/package.json 声明^0.6.14均通过pnpm工作区管理。准备树形数据JSON 嵌套结构演示使用站点公开数据 site/public/data/algorithm-category.json通过fetch异步加载fetch(/data/algorithm-category.json) .then((response) response.json()) .then((data) { /* 布局 渲染 */ })该数据是标准的递归嵌套结构每个节点包含id与可选的children数组。根节点是Modeling Methods建模方法下面分层挂载Classification分类、Consensus集成学习、Regression回归等大类再往下还有第三层、第四层子树例如Classification → Support vector machine、Consensus → Models diversity → Different architectures等。这正是脑图类应用最常见的输入形态——只需满足有 id、children 可递归的约定任何 JSON 树都能复用同一套布局渲染流程。Hierarchy.mindmap 布局参数详解拿到数据后调用Hierarchy.mindmap()进行布局const result Hierarchy.mindmap(data, { direction: H, getHeight() { return 16 }, getWidth() { return 16 }, getHGap() { return 80 }, getVGap() { return 1 }, getSide: () { return right }, })各配置项含义如下配置项示例值作用directionH布局方向H表示水平展开子节点分布在父节点左右两侧V则为垂直展开getWidth()16返回节点宽度用于参与水平间距计算此处所有节点统一为 16getHeight()16返回节点高度用于参与垂直间距计算getHGap()80水平方向父子节点间的间隔像素值越大树越宽getVGap()1垂直方向兄弟节点间的间隔值越大树越疏getSide()right子节点挂载方向返回right表示统一放在右侧形成标准的右向脑图布局结果result是一棵带有坐标的层次结构树每个节点都拥有id、x、y以及递归的childrenx/y即该节点在画布上的位置。值得说明的是getWidth/getHeight既可以是常量函数也可以接收节点数据对象动态计算——在 showcase 的交互式脑图示例 中getWidth(d)/getHeight(d)就改为读取每个节点自身的d.width/d.height让不同层级节点拥有不同尺寸。递归遍历布局结果构建 X6 模型拿到带坐标的树后代码声明了一个空的 X6 模型并递归生成节点与边const model: Model.FromJSONData { nodes: [], edges: [] } const traverse (data: HierarchyResult) { if (data) { model.nodes?.push({ id: ${data.id}, x: data.x 250, y: data.y 250, shape: circle, width: 16, height: 16, attrs: { body: { fill: #5F95FF, stroke: transparent, }, }, }) } if (data.children) { data.children.forEach((item: HierarchyResult) { model.edges?.push({ source: ${data.id}, target: ${item.id}, attrs: { line: { stroke: #A2B1C3, strokeWidth: 1, targetMarker: null, }, }, }) traverse(item) }) } } traverse(result)这段递归逻辑有三个要点坐标偏移布局结果可能是从原点附近开始的代码给x/y各加了250的偏移把整棵树平移到画布中央区域避免内容贴边。节点样式所有节点统一使用内置circle形状尺寸 16×16主体填充主题蓝#5F95FF、描边透明视觉上形成圆点组成的算法树。边定义对每个父子对生成一条边source/target直接引用节点的字符串id线色#A2B1C3、线宽 1并显式设置targetMarker: null去掉箭头——脑图连线通常不需要箭头。递归的终止条件很自然data.children不存在即叶子节点只生成节点不生成边。最终model的edges数量恰好等于非根节点数量。一次性渲染graph.fromJSON 与平滑连接模型构建完成后渲染只差一步graph.fromJSON(model)Graph.fromJSON()是 X6 提供的批量渲染入口接收{ nodes, edges }结构内部委托给this.model.fromJSON(data, options)执行见 src/graph/graph.ts。与逐节点addNode/addEdge相比fromJSON更适合布局算法这类整树一次性产出的场景数据完备、无中间交互一次调用即可完成全量渲染。画布初始化时还配置了连线器const graph new Graph({ container: document.getElementById(container)!, connecting: { connector: smooth, }, })connector: smooth让所有边以平滑曲线三次贝塞尔连接两个端点配合右向脑图布局形成典型的鱼骨视觉主干从根节点向右辐射曲线自然过渡到各级子节点。相比直角折线平滑曲线更贴合思维导图的观感。从示例到实战更完整的脑图实现layout/tree演示展示了最小可运行的树布局闭环。若要做成可交互的完整脑图仓库 showcase/practices 目录 提供了两个进阶范本交互式脑图mindmap.tssite/examples/showcase/practices/demo/mindmap.ts 在同一套Hierarchy.mindmap布局基础上补齐了产品级能力自定义节点通过Graph.registerNode注册topic中心/分支主题含 hover 出现的新增按钮与topic-child子主题两类节点自定义连接器Graph.registerConnector(mindmap, ...)用直线 二次贝塞尔的混合路径M...L...Q...模拟脑图经典连线自定义边注册mindmap-edge默认使用上述连接器交互配合Selection框选与Keyboard快捷键插件支持点击按钮、Tab键添加子主题Backspace/Delete删除主题锚点精细化边在源节点上的锚点根据目标类型动态选择center或right并带dx偏移确保连线起点对齐到文字一侧。可折叠树tree.tssite/examples/showcase/practices/demo/tree.ts 则展示了另一种树形态通过继承Node自定义tree-node在节点右侧渲染/-折叠按钮监听node:collapse事件后递归调用graph.getSuccessors()隐藏或显示整棵子树边使用Shape.Edge子类tree-edge配合router: er实体关系风格直角路由与direction: H连接父子节点。其折叠逻辑toggleVisible 递归遍历后继节点对实现任意可展开/收起树都具备直接参考价值。小结从 layout/tree 示例 可以看到一条清晰可复用的 X6 树布局方法论准备符合{ id, children }约定的嵌套 JSON调用Hierarchy.mindmap(data, { direction, getWidth, getHeight, getHGap, getVGap, getSide })获得带坐标的层次树递归遍历布局结果为每个节点生成 X6 节点、为每个父子对生成边拼装成{ nodes, edges }模型调用graph.fromJSON(model)一次性渲染并通过connecting.connector选择平滑曲线等连线风格。布局与渲染解耦的设计使得替换布局算法如换用Hierarchy.dendrogram、Hierarchy.indented等其他树布局或更换节点样式都只需改动流水线中的一环其余逻辑完全复用——这正是该示例最具工程参考价值的地方。【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考