antv/g6使用教程及图配置
介绍
G6 是一款由蚂蚁金服 AntV 团队开发的 JavaScript 图形引擎，用于构建各种交互式可视化图形，包括但不限于图表、网络拓扑图、关系图、流程图等。无论是数据分析、决策支持，还是信息可视化，G6 都是一个强大的工具。
以下是 G6 的主要特点和能力：
-
丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。
-
交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。
-
自动布局：G6 提供了多种自动布局算法，如树状布局、圆形布局、力导向布局等。
-
图表编辑：G6 支持图表的编辑功能，包括添加、删除、编辑节点和边，以及撤销和重做等功能。
-
扩展性：G6 允许开发人员根据项目需求轻松自定义和扩展功能，包括自定义渲染和交互行为。
-
多平台支持：G6 可以在浏览器和 Node.js 等环境中使用，这意味着你可以构建 Web 应用和服务器端应用。
使用
- HTML中CDN使用
<!DOCTYPE html>
<html>
<head>
<title>AntV G6 Demo</title>
</head>
<body>
<div id="container"></div>
<!-- 引用g6 -->
<script src="https://cdn.jsdelivr.net/npm/@antv/[email protected]/dist/g6.min.js"></script>
<script>
// 创建 G6 图表实例
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: container,
width: width,
height: height,
defaultNode: {
size: 20,
style: {
fill: '#C6E5FF',
stroke: '#5B8FF9',
lineWidth: 0.3,
},
labelCfg: {
style: {
fontSize: 12,
},
position: 'bottom',
offset: 1,
},
},
defaultEdge: {
style: {
lineWidth: 2,
color: '#000',
labelCfg: {
autoRotate: true,
refY: 5,
style: {
fill: '#000'
}
},
endArrow: {
fill: '#000',
path: G6.Arrow.triangle(10, 12, 25),
d: 25
}
}
}
});
// 定义图表数据
const data = {
nodes: [
{ id: 'node1', x: 100, y: 100, label: 'Node 1' },
{ id: 'node2', x: 300, y: 100, label: 'Node 2' },
],
edges: [
{ source: 'node1', target: 'node2', label: 'Edge 1' },
],
};
// 渲染图表
graph.data(data);
graph.render();
</script>
</body>
</html>
- npm 包引入
npm install --save @antv/g6
import G6 from '@antv/g6';
react为例：
import React, {useEffect, useRef} from 'react'
import G6 from '@antv/g6';
const TestG6 = ()=> {
const containerRef = useRef<HTMLDivElement>(null);
const graphRef = useRef<any>();
useEffect(()=>{
initDraw()
},[])
const initDraw=()=>{
graphRef.current = new G6.Graph({
linkCenter:true,
container: containerRef.current || '',
height: 800,
defaultNode: {
size: 20,
style: {
fill: '#C6E5FF',
stroke: '#5B8FF9',
lineWidth: 0.3,
},
labelCfg: {
style: {
fontSize: 12,
},
position: 'bottom',
offset: 1,
},
},
defaultEdge: {
style: {
lineWidth: 2,
color: '#000',
labelCfg: {
autoRotate: true,
refY: 5,
style: {
fill: '#000'
}
},
endArrow: {
fill: '#000',
path: G6.Arrow.triangle(10, 12, 25),
d: 25
}
}
}
});
const data = {
nodes: [
{ id: 'node1', x: 100, y: 100, label: 'Node 1' },
{ id: 'node2', x: 300, y: 100, label: 'Node 2' },
],
edges: [
{ source: 'node1', target: 'node2', label: 'Edge 1' },
],
};
// 渲染图表
graphRef.current.data(data);
graphRef.current.render();
}
return (
<div className='ModalgraphContainer' ref={containerRef} id="graphContainer"></div>
)
}
export default TestG6;
效果如下：
从例子可以看出，g6的数据结构就是node（点）、edge（边）组成。点需要id，边需要source(起点id)，target(终点id)。就可以绘制出简单的图了。
Graph 图配置
必须配置：
- container：图的容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
- width、height：画布容器的宽高
常用配置：
-
modes: 用于配置图表的交互模式，如缩放、平移、选择等。可以通过配置不同的模式来控制用户的交互操作。
-
layout: 用于指定图表的布局算法，如树状布局、圆形布局、力导向布局等。
-
defaultNode: 默认节点的样式配置，包括节点的形状、颜色、大小、标签等。
-
defaultEdge: 默认边的样式配置，包括边的类型、颜色、标签等。
-
nodeStateStyles: 定义节点的不同状态下的样式，例如 hover、selected 等。
-
edgeStateStyles: 定义边的不同状态下的样式，例如 hover、selected 等。
-
nodeStyle: 用于为特定节点定义自定义样式函数，可以根据节点的数据动态设置样式。
-
edgeStyle: 用于为特定边定义自定义样式函数，可以根据边的数据动态设置样式。
-
defaultNodeSize: 默认节点的大小。
-
defaultEdgeSize: 默认边的大小。
-
minZoom: 允许的最小缩放比例。
-
maxZoom: 允许的最大缩放比例。
-
fitView: 是否自动缩放以适应容器大小。
-
fitViewPadding: 缩放自适应时的内边距。
-
animate: 是否启用动画效果，以及动画的配置项，如持续时间、缓动函数等。
-
plugins: 图表插件的配置，用于扩展图表的功能，如 tooltip、contextMenu 等。
-
autoPaint: 是否启用自动重绘，如果禁用，需要手动调用
graph.paint()来渲染图表。 -
minZoom: 最小缩放比例。
-
maxZoom: 最大缩放比例。
-
defaultNodeShape: 默认节点的形状，可以是矩形、圆形、椭圆等。
-
defaultEdgeShape: 默认边的形状，可以是直线、曲线等。
本篇文章就介绍到这吧，后续会持续性解读g6的文档，更深入的探讨如何使用g6