X6 是基于 HTML 和 SVG 的图编辑引擎，基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑。

一、业务背景

将组织树形结构图形化，更直观的展示个人所在的组织架构。

二、功能点

1. 组织结构按需渲染，支持层级展开、收缩
2. 按需求自定义树节点视觉效果
3. 导出PNG
4. 小地图

三、技术点

• 数据转化：源数据 -> nodes和edges
• 自动计算布局
• 节点自定义
• 展开、收缩

四、遇到问题

节点自定义有两种方式，一种是使用@antv/x6-react-shape插件，通过定义React组件实现节点自定义，另一种是通过svg代码片段来自定义节点，api类似d3的用法。

第一种方式，在导出PNG的功能中遇到样式和组件中img没有显示的问题，暂时没有找到原因：

所以本文采用了第二种方式进行自定义节点。

五、Demo

六、代码地址

组织架构图代码地址

七、ToDo

• 展开/收缩树状态保留
• 动画
• 设置默认展开层级
• ......