1关斜、需求
根據(jù)后臺數(shù)據(jù)實現(xiàn)類似下圖效果：因為實際節(jié)點較多，需要支持節(jié)點折疊铺浇。
2痢畜、選擇
????????選擇很重要，花了兩天時間對比了echarts鳍侣、antv里的G2丁稀、G6，甚至還翻翻了D3倚聚。這個過程有點煩线衫，先是嘗試echarts里的關(guān)系圖，畢竟是大廠出來的惑折，API文檔還是挺全乎的授账，也易懂。深入研究后發(fā)現(xiàn)graph并不支持重復節(jié)點惨驶，無法實現(xiàn)需求白热，PASS。
????????再看看echarts里的tree粗卜，實話說echarts里的樹圖示例真的是好丑屋确。產(chǎn)品同學過來一看，直接不同意啊续扔。但畢竟是示例攻臀，我看看改造改造能否實現(xiàn)需求。發(fā)現(xiàn)有兩點不太好實現(xiàn)：
1纱昧、節(jié)點的smybol圖標無法移除刨啸，導致文字即使能夠放入矩形內(nèi)也無法隱藏掉smybol。
2砌些、當子節(jié)點過多時并排顯示時呜投，效果很差。
轉(zhuǎn)入Antv里的G6看看存璃，樣例中G6對流程圖、樹圖雕拼、文件系統(tǒng)圖支持的很好纵东，但有兩點不如意的地方：1、沒有React版的示例啥寇，導致實現(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
