先上圖，后面再一一解釋：
參考博客：https://blog.csdn.net/qq_34414916/article/details/80036679
ok，為了方便理解，這里我就沒有用之前封裝的automatch函數來將數據和節點匹配了，如果你對enter(),exit()函數還不是很理解的話，請移步至我之前寫的《node與數據匹配》（automatch函數）
那么接下來：
一、聲明全局變量
因為力導向圖，涉及到眾多節點的運動，並且在寫的時候都是以callback的形式去操作這些節點，所以這里我們將這些節點聲明為全局變量（應該也是可以直接聲明在組件的data里面的，如果你有興趣，不妨一試）
這些注釋應該都詳細了吧。
二、開始布局畫布
不難看出，在900x500的svg畫布上，添加了一個g標簽作為繪圖的起點(60,60)，並新建一個力導向圖
三、處理節點數據、關系數據
四、數據處理好之后，開始繪圖
①線和線上文字
②節點和節點面描述（他兩是一組）
因為是一組，所以他兩外面要用g標簽包裹，就和之前繪完整柱形圖時一樣
五、輔助函數
主函數中用到了4個輔助函數，其中一個用於初始化線的位置和線上文本位置以及節點分組的位置；
其他三個則用於控制節點分組拖拽時候的自己以及其他節點的位置：
六、官方相關API截圖
