為了將圖算法的結果在網站前端可視化，我嘗試尋找一些組件庫，最後讓我比較滿意的是螞蟻 antv 開源的 G6，無論是社交網絡圖還是蛋白質相互作用網絡效果都非常好，下面我簡單介紹一下使用。
1. 安裝 & 引用#
Github：https://github.com/antvis/G6
G6 是一個圖可視化引擎。它提供了圖的繪製、佈局、分析、交互、動畫等圖可視化的基礎能力。旨在讓關係變得透明，簡單。讓用戶獲得關係數據的 Insight。基於 G6，用戶可以快速搭建自己的 圖分析 或 圖編輯 應用。
1.1 在項目中使用 NPM 包引入#
Step 1: 使用命令行在項目目錄下執行以下命令：
npm install --save @antv/g6
Step 2: 在需要用的 G6 的 JS 文件中導入：
import G6 from '@antv/g6';
1.2 在 HTML 中使用 CDN 引入#
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>
2. 簡單示例#
引入 G6 庫之後，需要先創建一個 div 用於和渲染的結果綁定
<div id="mountNode" style="width: 100%; height: 100%;"></div>
然後在 js 裡面定義一個 data 數據，裡面要有 nodes 和 edges 列表，具體格式：
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '1',
label: '1',
}
],
edges: [
{
source: '0',
target: '1',
}
]
}
當然這只是最簡單的圖數據格式示例，還可以添加其它信息，比如 node 的 x, y 坐標。
接著就是創建圖對象，指定一些樣式以及最重要的之前第一步創建的 div 的 id 要 mount 過來：
const graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: ["drag-canvas", {
type: "drag-node",
delegate: false
}, {
type: "zoom-canvas",
sensitivity: 0.5
}]
},
layout: {
type: 'force',
linkDistance: 240,
nodeStrength: -30,
edgeStrength: 0.7
},
defaultNode: {
size: 54,
style: {
fill: '#C6E5FF',
stroke: '#5B8FF9'
},
labelCfg: {
style: {
fill: '#000000',
fontSize: 24
},
offsetX: 0,
offsetY: 0
}
},
defaultEdge: {
style: {
stroke: '#e2e2e2',
linewidth: 2
}
}
});
graph.data(data);
graph.render();
最後傳入代碼並渲染
graph.data(data);
graph.render();
3. 完整代碼#
network.html
<!DOCTYPE html>
<html>
<head>
<title>G6 Relationship Graph Example</title>
<meta charset="utf-8" />
</head>
<body>
<div id="mountNode" style="width: 100%; height: 100%;"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script>
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '1',
label: '1',
},
{
id: '2',
label: '2',
},
{
id: '3',
label: '3',
},
{
id: '4',
label: '4',
},
{
id: '5',
label: '5',
},
{
id: '6',
label: '6',
},
{
id: '7',
label: '7',
},
{
id: '8',
label: '8',
},
{
id: '9',
label: '9',
},
],
edges: [
{
source: '0',
target: '1',
},
{
source: '0',
target: '2',
},
{
source: '0',
target: '3',
},
{
source: '0',
target: '4',
},
{
source: '0',
target: '5',
},
{
source: '0',
target: '7',
},
{
source: '0',
target: '8',
},
{
source: '0',
target: '9',
},
{
source: '2',
target: '3',
},
{
source: '4',
target: '5',
},
{
source: '4',
target: '6',
},
{
source: '5',
target: '6',
},
],
};
// 創建圖
const graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: ["drag-canvas", {
type: "drag-node",
delegate: false
}, {
type: "zoom-canvas",
sensitivity: 0.5
}]
},
layout: {
type: 'force',
linkDistance: 240,
nodeStrength: -30,
edgeStrength: 0.7
},
defaultNode: {
size: 54,
style: {
fill: '#C6E5FF',
stroke: '#5B8FF9'
},
labelCfg: {
style: {
fill: '#000000',
fontSize: 24
},
offsetX: 0,
offsetY: 0
}
},
defaultEdge: {
style: {
stroke: '#e2e2e2',
linewidth: 2
}
}
});
graph.data(data);
graph.render();
</script>
</body>
</html>
4. 渲染效果#
第一張圖是上面的示例代碼渲染的結果，第二張圖是我的圖算法的查詢結果的渲染效果。
如果只是渲染一個簡單的圖的話參考我上面的代碼完全夠了，更複雜的就要去學習學習官方文檔了。