React下使用antv/g6实现树图/流程图

Posted 2023-03-01

参考技术A 根据后台数据实现类似下图效果：因为实际节点较多，需要支持节点折叠。

        选择很重要，花了两天时间对比了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的优点也很明显，对此类图支持的很好、灵活，提供丰富的接口。

html版的实现有示例。React需要关注的有几点：

1、安装 

npm install @antv/g6 --save

npm install @antv/hierarchy --save

2、引用

3、G6 注册 需要放在componentDidMount里，示例中可找到。我使用的自定义树图，如果不是自定义的，可忽略这段

4、数据渲染在componentWillMount 里实现，在获取后台数据后，即可将数据传入renderG6AfterData方法。

以后即可实现一个自定义树图 。

注意：

1、需要有一个容器：<div id="mountNode"></div> 在render()方法里return

2、在数据源多次变化时先需要销毁画布

3、至于其它的边文字、节点提示等等，文档好好看看就行了。这里只讲React的简单实现，供大家少走弯路。官方HTML版示例链接： https://antv.alipay.com/zh-cn/g6/3.x/demo/tree/custom-tree.html