介绍
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/g6@3.7.0/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
