先上圖，後面再一一解釋：

ok，為了方便理解，這裡我就沒有用之前封裝的automatch函式來將資料和節點匹配了，如果你對enter(),exit()函式還不是很理解的話，請移步至我之前寫的《node與資料匹配》（automatch函式）

那麼接下來：

一、宣告全域性變數

因為力導向圖，涉及到眾多節點的運動，並且在寫的時候都是以callback的形式去操作這些節點，所以這裡我們將這些節點宣告為全域性變數（應該也是可以直接宣告在元件的data裡面的，如果你有興趣，不妨一試）

這些註釋應該都詳細了吧。

二、開始佈局畫布

不難看出，在900x500的svg畫布上，添加了一個g標籤作為繪圖的起點(60,60)，並新建一個力導向圖

三、處理節點資料、關係資料

四、資料處理好之後，開始繪圖

①線和線上文字

②節點和節點面描述（他兩是一組）

因為是一組，所以他兩外面要用g標籤包裹，就和之前繪完整柱形圖時一樣

五、輔助函式

主函式中用到了4個輔助函式，其中一個用於初始化線的位置和線上文字位置以及節點分組的位置；

其他三個則用於控制節點分組拖拽時候的自己以及其他節點的位置：

六、官方相關API截圖