前端图可视化组件G6

为了将图算法的结果在网站前端可视化，我尝试寻找一些组件库，最后让我比较满意的是蚂蚁 antv 开源的 G6，无论是社交网络图还是蛋白质相互作用网络效果都非常好，下面我简单介绍一下使用。

1. 安装 & 引用

Github：https://github.com/antvis/G6

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。

1.1 在项目中使用 NPM 包引入

Step 1: 使用命令行在项目目录下执行以下命令：

Copy
npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

Copy
import G6 from '@antv/g6';

1.2 在 HTML 中使用 CDN 引入

Copy


2. 简单示例

引入 G6 库之后，需要先创建一个 div 用于和渲染的结果绑定

Copy


然后在 js 里面定义一个 data 数据，里面要有 nodes 和 edges 列表，具体格式：

Copy
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '1',
label: '1',
}
],
edges: [
{
source: '0',
target: '1',
}
]
}

当然这只是最简单的图数据格式示例，还可以添加其它信息，比如 node 的 x, y 坐标。

接着就是创建图对象，指定一些样式以及最重要的之前第一步创建的 div 的 id 要 mount 过来：

Copy
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();

最后传入代码并渲染

Copy
graph.data(data);
graph.render();

3. 完整代码

network.html

Copy




G6 Relationship Graph Example







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();





4. 渲染效果

第一张图是上面的示例代码渲染的结果，第二张图是我的图算法的查询结果的渲染效果。

如果只是渲染一个简单的图的话参考我上面的代码完全够了，更复杂的就要去学习学习官方文档了。