網路拓撲 ( Topological Map )，又稱為網路布局，或網路結構。此為電腦網路中，端點間連接的方式。網路上各端點藉由鏈 ( Link )、節點 ( Node ) 或交換中心 ( Switch )互相連接。這種連接的通路分布即為網路拓樸。
繪製網路拓樸圖能夠釐清——系統內部，每台電腦之間的關係，對於維運、監控系統、管理主機設備，有很大的功用。
曾經有使用過 jQuery 製作繪製拓樸圖的功能，因為不斷的定位 DOM 當下的狀態，並使其更改、刷新......等，使得專案結構上不是這麼好維護。
此專案目的為使用 Vue3 的資料驅動畫面、雙向綁定和資料流的思考方式，搭配 D3.js 來重構繪製拓樸圖的功能。
- 線上 DEMO 站 - https://www.puraliena.com/
- 編輯拓樸圖
從零開始繪製一張：一階層、一節點的拓樸圖。
可至 Doc Flow 這個資料夾查看以下案例：
- 新增階層
- 新增節點
- 刪除群組
- 刪除階層
- 刪除節點 ( 內部 + 外部 )
- 刪除連線
- 修改群組名稱
- 修改階層名稱
- 修改節點名稱
- vue - SPA 應用框架，版本為 3.2。
- pinia - vuex 的簡化版，管理共用的資料。
- vue-router - vue 的路由系統。
- d3.js - 繪製 SVG 連線。
- vite - 本地開發比起 webpack 更有效率的 dev-server（不進行打包）。
- bootstrap - 版本為 5.1.3，無依賴 jQuery 的版本，作為開發 UI 操作介面的基底。
- sass - 配合 vite 的打包，進行 CSS 的模組化樣式管理。
- typescript - 管理 JS 的 Type。
僅僅為 DEMO 功能，並沒有要將資料存回後端，因為沒有後端，所以這邊就介紹資料結構。
此 Type 可在 /src/type/type.d.ts 找到對照。
目前沒有開後端 Server 串資料庫，範例資料的三支 API 是串 Apiary 的 Mock Server。
安裝 NPM 依賴並運行。
npm install
npm run dev
# 顯示 > Local: http://localhost:3000/- 網站內的內容，皆作為學術研究用途，無商業行為。
- 素材與資料來源：Reshot、Freepik、國家教育研究院、Wikipedia。