本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

使用 Rough.js 創(chuàng)建動態(tài)可視化網絡圖

應用場景

Rough.js 是一個 JavaScript 庫，它允許開發(fā)人員使用毛邊風格創(chuàng)建可視化效果。該庫適用于各種應用程序，例如：

• 數據可視化
• 地圖繪制
• 用戶界面設計
• 藝術和插圖

代碼基本功能

本代碼演示了如何使用 Rough.js 創(chuàng)建一個動態(tài)可視化網絡圖。網絡圖由節(jié)點和邊組成，其中節(jié)點表示數據點，邊表示節(jié)點之間的連接。該代碼允許用戶交互式地探索網絡，縮放和拖動節(jié)點以查看連接和數據。

功能實現步驟

1. 加載必要的庫

首先，代碼加載了必要的庫，包括 D3.js 和 Rough.js。D3.js 用于處理數據和創(chuàng)建可視化效果，而 Rough.js 用于創(chuàng)建毛邊風格的效果。

import { onMounted } from 'vue'
import { Network } from 'rough-viz'

2. 創(chuàng)建節(jié)點和邊

接下來，代碼創(chuàng)建了網絡圖的節(jié)點和邊。節(jié)點使用 createNodes 函數創(chuàng)建，該函數生成具有隨機半徑的節(jié)點。邊使用 createLinks 函數創(chuàng)建，該函數生成連接相鄰節(jié)點的邊。

const createNodes = (numNodes) => {return d3.range(numNodes).map(() => {// ...})
}const createLinks = (numNodes) => {return d3.range(numNodes - 1).map((d, i) => ({// ...}))
}

3. 創(chuàng)建網絡圖

在加載庫并創(chuàng)建數據之后，代碼使用 Network 類創(chuàng)建了網絡圖。Network 類接受一個包含網絡圖配置的選項對象。

new Network({element: '#viz4',data: createNodes(20),links: createLinks(20),// ...
})

4. 配置網絡圖選項

Network 類允許用戶配置各種選項，包括：

• collision: 節(jié)點之間的最小距離
• radiusExtent: 節(jié)點半徑的范圍
• roughness: 毛邊效果的粗糙度
• fillStyle: 節(jié)點的填充樣式
• stroke: 節(jié)點的描邊顏色
• color: 節(jié)點的顏色
• margin: 網絡圖周圍的邊距

5. 添加交互功能

代碼還添加了交互功能，允許用戶縮放和拖動節(jié)點。這使用 Vue.js 的 onMounted 鉤子實現，該鉤子在組件掛載時觸發(fā)。

onMounted(async () => {// ...new Network({// ...})
})

關鍵代碼分析

const loadJavascript = (jsUrl) => {return new Promise((resolve, reject) => {const script = document.createElement('script')// ...document.body.appendChild(script)})
}

此代碼用于動態(tài)加載 JavaScript 庫。它創(chuàng)建了一個 Promise，并在加載腳本后解析。

const createNodes = (numNodes) => {return d3.range(numNodes).map(() => {const randomValue = Math.random()// ...return {radius: multiplier * 5,}})
}

此代碼創(chuàng)建具有隨機半徑的節(jié)點。multiplier 變量用于根據節(jié)點的隨機值調整半徑。

const createLinks = (numNodes) => {return d3.range(numNodes - 1).map((d, i) => ({source: i,target: i + 1,}))
}

此代碼創(chuàng)建連接相鄰節(jié)點的邊。source 和 target 屬性指定邊的源節(jié)點和目標節(jié)點。

總結與展望

開發(fā)這段代碼是一個學習使用 Rough.js 創(chuàng)建動態(tài)可視化的過程。該代碼可以擴展和優(yōu)化，例如：

• 添加對更多數據源的支持

• 實現更復雜的交互功能，例如節(jié)點選擇和過濾

• 探索使用 Rough.js 的其他毛邊效果和樣式選項

  更多組件：
  
  
  
  

  獲取更多Echos

  本文由ScriptEcho平臺提供技術支持

  項目地址：傳送門

  掃碼加入AI生成前端微信討論群：