X6 是基于 HTML 和 SVG 的图编辑引擎，基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑。
一、业务背景
将组织树形结构图形化，更直观的展示个人所在的组织架构。
二、功能点
- 组织结构按需渲染，支持层级展开、收缩
- 按需求自定义树节点视觉效果
- 导出PNG
- 小地图
三、技术点
- 数据转化：源数据 -> nodes和edges
- 自动计算布局
- 节点自定义
- 展开、收缩
四、遇到问题
节点自定义有两种方式，一种是使用@antv/x6-react-shape插件，通过定义React组件实现节点自定义，另一种是通过svg代码片段来自定义节点，api类似d3的用法。
第一种方式，在导出PNG的功能中遇到样式和组件中img没有显示的问题，暂时没有找到原因：
所以本文采用了第二种方式进行自定义节点。
五、Demo
六、代码地址
组织架构图代码地址
七、ToDo
- 展开/收缩树状态保留
- 动画
- 设置默认展开层级
- ......
