本文由ScriptEcho平臺提供技術支持
項目地址：傳送門
應用場景
Rough.js 是一個 JavaScript 庫，它允許開發人員使用毛邊風格創建可視化效果。該庫適用于各種應用程序，例如：
- 數據可視化
- 地圖繪制
- 用戶界面設計
- 藝術和插圖
代碼基本功能
本代碼演示了如何使用 Rough.js 創建一個動態可視化網絡圖。網絡圖由節點和邊組成，其中節點表示數據點，邊表示節點之間的連接。該代碼允許用戶交互式地探索網絡，縮放和拖動節點以查看連接和數據。
功能實現步驟
1. 加載必要的庫
首先，代碼加載了必要的庫，包括 D3.js 和 Rough.js。D3.js 用于處理數據和創建可視化效果，而 Rough.js 用于創建毛邊風格的效果。
import { onMounted } from 'vue'
import { Network } from 'rough-viz'
2. 創建節點和邊
接下來，代碼創建了網絡圖的節點和邊。節點使用 createNodes 函數創建，該函數生成具有隨機半徑的節點。邊使用 createLinks 函數創建，該函數生成連接相鄰節點的邊。
const createNodes = (numNodes) => {
return d3.range(numNodes).map(() => {
// ...
})
}
const createLinks = (numNodes) => {
return d3.range(numNodes - 1).map((d, i) => ({
// ...
}))
}
3. 創建網絡圖
在加載庫并創建數據之后，代碼使用 Network 類創建了網絡圖。Network 類接受一個包含網絡圖配置的選項對象。
new Network({
element: '#viz4',
data: createNodes(20),
links: createLinks(20),
// ...
})
4. 配置網絡圖選項
Network 類允許用戶配置各種選項，包括：
-
collision: 節點之間的最小距離 -
radiusExtent: 節點半徑的范圍 -
roughness: 毛邊效果的粗糙度 -
fillStyle: 節點的填充樣式 -
stroke: 節點的描邊顏色 -
color: 節點的顏色 -
margin: 網絡圖周圍的邊距
5. 添加交互功能
代碼還添加了交互功能，允許用戶縮放和拖動節點。這使用 Vue.js 的 onMounted 鉤子實現，該鉤子在組件掛載時觸發。
onMounted(async () => {
// ...
new Network({
// ...
})
})
關鍵代碼分析
const loadJavascript = (jsUrl) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
// ...
document.body.appendChild(script)
})
}
此代碼用于動態加載 JavaScript 庫。它創建了一個 Promise，并在加載腳本后解析。
const createNodes = (numNodes) => {
return d3.range(numNodes).map(() => {
const randomValue = Math.random()
// ...
return {
radius: multiplier * 5,
}
})
}
此代碼創建具有隨機半徑的節點。multiplier 變量用于根據節點的隨機值調整半徑。
const createLinks = (numNodes) => {
return d3.range(numNodes - 1).map((d, i) => ({
source: i,
target: i + 1,
}))
}
此代碼創建連接相鄰節點的邊。source 和 target 屬性指定邊的源節點和目標節點。
總結與展望
開發這段代碼是一個學習使用 Rough.js 創建動態可視化的過程。該代碼可以擴展和優化，例如：
添加對更多數據源的支持
實現更復雜的交互功能，例如節點選擇和過濾
-
探索使用 Rough.js 的其他毛邊效果和樣式選項
更多組件：
獲取更多Echos
本文由ScriptEcho平臺提供技術支持
項目地址：傳送門
微信搜索ScriptEcho了解更多
