AntV G6 图可视化库入门教程：从零开始构建关系图
2025-07-06 04:53:59作者：牧宁李
前言
AntV G6 是一款功能强大的图可视化引擎，专门用于处理复杂关系数据的可视化需求。本教程将带领初学者从零开始，逐步掌握使用 G6 创建关系图的核心技能。
环境准备
项目初始化
首先创建一个空目录并初始化项目：
mkdir g6-demo
cd g6-demo
npm init -y
安装依赖
安装 G6 核心库和开发工具：
npm install @antv/g6 --save
npm install vite --save-dev
项目结构
创建基础文件结构：
g6-demo/
├── index.html
├── main.ts
└── package.json
基础图表创建
HTML 结构
<!doctype html>
<html>
<head>
<title>G6 入门教程</title>
</head>
<body>
<div id="container"></div>
<script type="module" src="main.ts"></script>
</body>
</html>
初始化图表
在 main.ts 中创建最简单的图表：
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node-1', style: { x: 50, y: 50 } },
{ id: 'node-2', style: { x: 150, y: 50 } },
],
edges: [{ source: 'node-1', target: 'node-2' }],
},
});
graph.render();
元素样式定制
节点样式配置
G6 提供了灵活的样式配置方式：
{
node: {
style: {
fill: 'pink',
size: 20
}
}
}
多种节点类型
可以混合使用不同类型的节点：
{
node: {
type: (datum) => datum.id === 'node-1' ? 'circle' : 'rect',
style: {
fill: 'pink',
size: 20
}
}
}
交互功能增强
添加行为
G6 内置了多种交互行为：
{
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'];
}
自动布局系统
力导向布局
当节点数量较多时，可以使用自动布局：
{
layout: {
type: 'd3-force',
},
}
高级特性
颜色映射
使用调色板自动分配节点颜色：
{
node: {
palette: {
field: 'category',
color: 'tableau',
}
}
}
插件系统
扩展图表功能：
{
plugins: ['grid-line'],
}
完整示例
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
data: {
nodes: Array.from({ length: 10 }).map((_, i) => ({
id: `node-${i}`,
data: { category: i === 0 ? 'central' : 'around' },
})),
edges: Array.from({ length: 9 }).map((_, i) => ({
source: `node-0`,
target: `node-${i + 1}`
})),
},
node: {
palette: {
field: 'category',
color: 'tableau',
},
style: {
size: 20,
},
},
edge: {
style: {
stroke: 'lightgreen',
},
},
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
layout: {
type: 'd3-force',
},
plugins: [{ type: 'grid-line', follow: true }],
});
graph.render();
总结
通过本教程，我们学习了：
- G6 的基本使用流程
- 元素样式定制方法
- 交互行为的添加
- 自动布局的应用
- 高级特性如调色板和插件
G6 提供了丰富的功能和灵活的配置选项，能够满足各种复杂的图可视化需求。建议读者在掌握基础后，进一步探索 G6 的高级功能和自定义扩展能力。
