antv x6 思维导图

### 如何使用 AntV X6 创建思维导图 #### 安装依赖库 为了在 Vue 项目中集成 AntV X6 并创建思维导图，需先安装 `@antv/x6` 和 `antv-x6-vue` 库[^2]。 ```bash npm install @antv/x6 antv-x6-vue --save ``` #### 初始化图表容器 在 HTML 文件内定义一个用于容纳图表的 DOM 元素，并设置其 ID 属性以便后续通过 JavaScript 获取该元素实例[^1]。 ```html <div id="container"></div> ``` #### 配置图表属性 利用 AntV X6 提供的方法初始化 Graph 实例对象，指定宽度高度以及网格线显示等基础参数配置[^5]。 ```javascript import { Graph } from '@antv/x6' const graph = new Graph({ container: document.getElementById('container'), width: 800, height: 600, grid: true, // 显示网格辅助线 }) ``` #### 添加根节点 为构建思维导图结构，首先向画布添加代表主题概念的核心节点。可以通过调用 `graph.addNode()` 方法传入具体位置坐标、标签文字等内容来完成操作。 ```javascript // 插入中心节点作为思维导图起点 graph.addNode({ x: 400, y: 300, width: 100, height: 40, label: '核心话题', }) ``` #### 构建子级分支 围绕着已有的父节点进一步扩展关联项形成层次化的逻辑关系网路。这里采用循环迭代的方式批量追加多个同级别下的子节点，并建立父子间连接边的关系表达。 ```javascript function addChildren(parentId, childrenData) { const parentPosition = graph.getCellById(parentId).position() childrenData.forEach((childItem, index) => { let childNode = graph.addCell({ shape: 'rect', // 默认矩形形状 x: parentPosition.x + (index * 150), // 动态调整X轴偏移量防止重叠 y: parentPosition.y + 70, // Y轴固定向下位移一段距离 width: 100, height: 40, label: childItem.text, source: parentId // 设置源端点指向当前处理中的parent node }) // 如果还有更深层次的数据则递归调用本函数继续生长新的枝叶部分 if(childItem.children && Array.isArray(childItem.children)){ addChildren(childNode.id, childItem.children); } }); } ``` #### 数据驱动视图更新 实际应用过程中往往是从后台获取JSON格式化后的树状数据集，再依据这些信息动态渲染前端展示效果。因此建议提前规划好API接口的设计思路，确保前后端交互顺畅无阻。 ```json [ { "text": "一级分类A", "children":[ {"text":"二级-A"}, {"text":"二级-B"} ] }, ... ] ```