1、需求

根據(jù)后臺數(shù)據(jù)實現(xiàn)類似下圖效果：因為實際節(jié)點較多，需要支持節(jié)點折疊。

2、選擇

????????選擇很重要，花了兩天時間對比了echarts、antv里的G2、G6，甚至還翻翻了D3。這個過程有點煩，先是嘗試echarts里的關(guān)系圖，畢竟是大廠出來的，API文檔還是挺全乎的，也易懂。深入研究后發(fā)現(xiàn)graph并不支持重復(fù)節(jié)點，無法實現(xiàn)需求，PASS。

????????再看看echarts里的tree，實話說echarts里的樹圖示例真的是好丑。產(chǎn)品同學過來一看，直接不同意啊。但畢竟是示例，我看看改造改造能否實現(xiàn)需求。發(fā)現(xiàn)有兩點不太好實現(xiàn)：

1、節(jié)點的smybol圖標無法移除，導(dǎo)致文字即使能夠放入矩形內(nèi)也無法隱藏掉smybol。

2、當子節(jié)點過多時并排顯示時，效果很差。

轉(zhuǎn)入Antv里的G6看看，樣例中G6對流程圖、樹圖、文件系統(tǒng)圖支持的很好，但有兩點不如意的地方：1、沒有React版的示例，導(dǎo)致實現(xiàn)時需要花費大量時間研究，這也是我寫這篇文章的原因。百度出的npm包?如react-g6/react-for-g6?并無法解決問題。2、G6的文檔沒有echarts完善、專業(yè)。但G6的優(yōu)點也很明顯，對此類圖支持的很好、靈活，提供豐富的接口。

3、實現(xiàn)

Html版的實現(xiàn)有示例。React需要關(guān)注的有幾點：

1、安裝?

npm install @antv/g6 --save

npm install @antv/hierarchy --save

2、引用

3、G6?注冊?需要放在componentDidMount里，示例中可找到。我使用的自定義樹圖，如果不是自定義的，可忽略這段

4、數(shù)據(jù)渲染在componentWillMount?里實現(xiàn)，在獲取后臺數(shù)據(jù)后，即可將數(shù)據(jù)傳入renderG6AfterData方法。

以后即可實現(xiàn)一個自定義樹圖 。

注意：

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

2、在數(shù)據(jù)源多次變化時先需要銷毀畫布

3、至于其它的邊文字、節(jié)點提示等等，文檔好好看看就行了。這里只講React的簡單實現(xiàn)，供大家少走彎路。官方HTML版示例鏈接：https://antv.alipay.com/zh-cn/g6/3.x/demo/tree/custom-tree.html