本文介绍了如何在React项目中利用antv/g6库创建一个可拖动的流程图，包括解决节点折叠和重复节点的问题。在比较了echarts、G2、G6和D3后，选择了G6，尽管它缺乏React示例和详细文档，但因其对流程图和树图的良好支持而被采用。实现过程中涉及的数据渲染、组件生命周期方法的使用以及注意事项等关键点也进行了说明。
1、需求
根据后台数据实现类似下图效果：因为实际节点较多，需要支持节点折叠。
2、选择
选择很重要，花了两天时间对比了echarts、antv里的G2、G6，甚至还翻翻了D3。这个过程有点烦，先是尝试echarts里的关系图，毕竟是大厂出来的，API文档还是挺全乎的，也易懂。深入研究后发现graph并不支持重复节点，无法实现需求，PASS。
再看看echarts里的tree，实话说echarts里的树图示例真的是好丑。产品同学过来一看，直接不同意啊。但毕竟是示例，我看看改造改造能否实现需求。发现有两点不太好实现：
1、节点的smybol图标无法移除，导致文字即使能够放入矩形内也无法隐藏掉smybol。
2、当子节点过多时并排显示时，效果很差。
转入Antv里的G6看看，样例中G6对流程图、树图、文件系统图支持的很好，但有两点不如意的地方：1、没有React版的示例，导致实现时需要花费大量时间研究，这也是我写这篇文章的原因。百度出的npm包 如react-g6/react-for-g6 并无法解决问题。2、G6的文档没有echarts完善、专业。但G6的优点也很明显，对此类图支持的很好、灵活，提供丰富的接口。
3、实现
Html版的实现有示例。React需要关注的有几点：
1、安装
npm install @antv/g6 --save
npm install @
最低0.47元/天 解锁文章
扫一扫
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
