功能列表：
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
- 解壓D3-Es6-master 在docs 文件夾下,打開index.htm 進行操作
- 核心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) 添加節點
點擊添加節點,彈出輸入框,輸入信息后點擊添加即為添加成功
(2) 批量添加節點(新增)
添加多個有內容節點時,節點名稱用|分隔,可以復用節點標題和節點注釋,節點數量不必填寫
只填寫節點數量時,生成對應個數的空白節點
(3) 刪除節點
選中該節點,點擊刪除節點,如果該節點有子級時,子級節點並不會消失,變成游離狀態
(4) 添加連線
點擊添加連線,點擊父級節點,鼠標左鍵進行拖動至子級節點,箭頭由父級指向子級
(5) 刪除連線
同刪除節點
- 說明(問題)
(1) 新增數據時,修改 data.js 文件 docs\docs\datajs\data.js
編輯時的數據來源mockData 見6
(2) 原始根節點(頂級節點),在excel 沒有數據,需要手動添加一行.
在添加數據時處理,再次添加次級根節點不需要操作excel
頂級節點的默認Id 為root,同(3)圖,導出Excel時,與頂級節點關聯的,顯示如下
(3) 進行刪除節點操作時,只能選擇一個節點,多選或不選時,提示內容,當刪除異常時,使用鼠標右鍵刪除
(4) 目前導出的excel名稱默認為excel+毫秒,工作表名稱默認名稱為mySheet
(5) 刪除節點或刪除連線時,可以在該節點進行鼠標右鍵操作
- 測試數據 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. 增加節點時取消連續點擊連續添加的功能