D3.js+Es6+webpack構建人物關係圖(力導向圖)

功能列表：
1. 增長下載SVG轉PNG功能，圖片尺寸超出可視區域也可以下載所有顯示出來
2. 增長圖譜放大縮小平移功能
3. 增長圖譜初始化加載時自動縮放功能
4. 增長導出excel功能,配合後臺工具類達到導入excel的功能
5. 增長右鍵菜單功能(刪除,編輯)
6. 增長拖拽添加連線功能
7. 增長鼠標點擊畫布增長節點功能,支持批量添加並取消連續點擊連續添加的功能
8. 增長右鍵刪除節點和左側工具欄刪除節點功能
9. 增長環形佈局
10. 增長矩形佈局

在此大神的代碼基礎上,進行了修改,源代碼地址::https://github.com/zhangzn3/D3-Es6   

修改版代碼地址:https://github.com/f2733938/D3_ES6

使用文檔:

D3-Es6-master 使用文檔 V2

1. 解壓D3-Es6-master  在docs 文件夾下,打開index.htm 進行操做

   

 

 

1. 核心js  home.bundle.js      D3-Es6-master\docs\js

(1) 初始加載數據 _api2.default.getData().always(function (rps)方法

      

 

(2) 添加節點  d3.select('#J_AddNode').on("click.add-node", function ()方法

    

 

(3) 添加連線,創建對應關係,雙向線代碼部分理應刪除

    

 

(4) 導出excel  exportExcel: function exportExcel(json)

     

 

(5) 顯示數據

  

 

 

 

1. 使用

(1)  添加節點

     點擊添加節點,彈出輸入框,輸入信息後點擊添加即爲添加成功

(2)  批量添加節點(新增)

  添加多個有內容節點時,節點名稱用|分隔,能夠複用節點標題和節點註釋,節點數量沒必要填寫

  只填寫節點數量時,生成對應個數的空白節點

(3)  刪除節點

     選中該節點,點擊刪除節點,若是該節點有子級時,子級節點並不會消失,變成遊離狀態

(4)  添加連線

     點擊添加連線,點擊父級節點,鼠標左鍵進行拖動至子級節點,箭頭由父級指向子級

(5)  刪除連線

     同刪除節點

1. 說明(問題)

(1) 新增數據時,修改 data.js 文件 docs\docs\datajs\data.js

 

 

編輯時的數據來源mockData 見6

 

(2) 原始根節點(頂級節點),在excel 沒有數據,須要手動添加一行.

在添加數據時處理,再次添加次級根節點不須要操做excel

頂級節點的默認Id 爲root,同(3)圖,導出Excel時,與頂級節點關聯的,顯示以下

 

 

(3) 進行刪除節點操做時,只能選擇一個節點,多選或不選時,提示內容,當刪除異常時,使用鼠標右鍵刪除

  

 

(4) 目前導出的excel名稱默認爲excel+毫秒,工做表名稱默認名稱爲mySheet

  

 

(5) 刪除節點或刪除連線時,能夠在該節點進行鼠標右鍵操做

1. 測試數據   cscoIV期評估

  

 

 

 6.  導入數據  後臺修改第二版

  對原有的excel 進行導入編輯時,須要在後臺生成對應的json 文件,excel 文件不可有跳轉數據而且必需要有頂級節點

(1) .  使用TestReadPoi 生成json 文件

       配置讀取文件路徑,修改在該類下的filePath

   

 

       配置json文件導出路徑,修改工具類WriteText 下的path

 

 

  執行junit  ,獲得json  文件

(2) .  將數據複製進data.js 中

  data.js 文件位置 \docs\docs\datajs\data.js

 

目前生成的 json 數據和d3  所須要的數據一致

 

 

 

實現導入excel功能時,初版徹底是前端進行解析,可是獲得json 後,沒法再次調用繪製D3 的方法(前端水平限制了我),只能按照從後臺生成json ,而後總體複製的方法,方法low了一些,可是總體功能都能實現

 差別列表：
1. 新增節點取消隨機數生成,採用表格輸入

 

2. 增長批量添加節點的功能3. 導出excel 時,新增導出字段,不單單是source target,見1(4)4. 在原有導出excel功能,添加配合後臺工具類達到導入excel的功能5. 增長右鍵菜單功能(刪除,編輯)6. 修改節點顯示7. 增長節點時取消連續點擊連續添加的功能