G6是一个简单、易用、完备的图可视化引擎，能帮助开发者搭建属于自己的图，图分析应用或是图编辑器应用（来自官网）。
G6不依赖其他的框架，只需要开发者使用js开发，可以轻松让初学者接触到可视化领域，完成较为高质量可视化项目。在这里我简单介绍G6的用法，适合新手快速入门。
1.安装和引用
1）安装
npm install --save @antv/g6
2）引入
import G6 from '@antv/g6'
2.创建第一个图
1）创建一个div作为渲染区域（可以为div设置样式，让它全屏展示，方便后续调整）
2）编写js部分代码
- 首先，实例化G6.graph，并在里面传入你需要的配置
- 然后，设置渲染的json数据
const data = { // 点集 nodes: [{ id: '1', // String，该节点存在则必须，节点的唯一标识 label: 'node1', },{ id: '2', // String，该节点存在则必须，节点的唯一标识 label: 'node2', },{ id: '3', // String，该节点存在则必须，节点的唯一标识 label: 'node3', },{ id: '4', // String，该节点存在则必须，节点的唯一标识 label: 'node4', },{ id: '5', // String，该节点存在则必须，节点的唯一标识 label: 'node5', }], // 边集 edges: [{ source: '1', // String，必须，起始点 id target: '2', // String，必须，目标点 id }, { source: '2', // String，必须，起始点 id target: '3', // String，必须，目标点 id },{ source: '2', // String，必须，起始点 id target: '4', // String，必须，目标点 id },{ source: '3', // String，必须，起始点 id target: '5', // String，必须，目标点 id },{ source: '4', // String，必须，起始点 id target: '5', // String，必须，目标点 id }] }; - 传入数据
graph.data(data); - 渲染图
graph.render(); // 渲染图 - 简单的图就完成了，渲染后展示如下
3.节点和边的配置
在上述图的基础上，我们可以添加一些节点和边的配置，来优化这张图。
- 节点
在默认节点配置处添加style属性，首先可以为矩形添加圆角radius，然后我们设置边框的宽度lineWidth，边框的颜色stroke，填充背景色fill，再为节点添加阴影和鼠标移动到节点的效果。另外，可以通过labelCfg配置节点文字的样式，代码如下。
此时我们可以看一下效果。// 默认节点配置(非必须) defaultNode: { type: 'rect', style: { radius: 5, // 圆角 lineWidth: 2, // 边框宽度 stroke: 'purple', // 边框颜色 fill: 'pink', // 填充背景色 shadowColor: '#1890ff', // 阴影颜色 shadowBlur: 20, // 阴影范围 shadowOffsetX: 0, // 阴影偏移位置 shadowOffsetY: 0, cursor: 'move', // 鼠标移动到节点上的样式 }, labelCfg: { style: { fontSize: 14, fill: 'purple', // 文字颜色 cursor: 'move', // 鼠标移动到文字上的样式 } } },
如果你想要改变单个节点的样式，同样很简单，我们可以在节点数据的部分进行调整。
在代码中，我们调整了id为1的节点，再看一下绘制的图，可以发现第一个节点的样式就发生了变化。
G6支持多种节点类型，包括包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut，这里设置几种为大家进行展示，代码和实现效果如下。// 点集 nodes: [{ id: '1', // String，该节点存在则必须，节点的唯一标识 label: 'node1', type: 'circle', // 节点类型-圆形 style: { // 节点样式 r: 40, stroke: 'blue', lineWidth: 5, } }, { id: '2', // String，该节点存在则必须，节点的唯一标识 label: 'node2', type: 'rect', // 节点类型-矩形 style: { width: 100, height: 50, radius: 6, lineWidth: 2, } }, { id: '3', // String，该节点存在则必须，节点的唯一标识 label: 'node3', type: 'ellipse', // 节点类型-椭圆 style: { rx: 50, ry: 30, } }, { id: '4', // String，该节点存在则必须，节点的唯一标识 label: 'node4', type: 'diamond', // 节点类型-菱形 size: [100, 50], style: { lineWidth: 2, } }, { id: '5', // String，该节点存在则必须，节点的唯一标识 label: 'node5', }],
- 边
同样，G6也为我们提供了一些内置的边，例如，圆弧、贝塞尔曲线等等，在这里做部分展示。// 边集 edges: [{ source: '1', // String，必须，起始点 id target: '2', // String，必须，目标点 id type: 'line', // 内置边-直线 label: 'line', }, { source: '2', // String，必须，起始点 id target: '3', // String，必须，目标点 id type: 'polyline',// 内置边-折线 label: 'polyline', }, { source: '2', // String，必须，起始点 id target: '4', // String，必须，目标点 id type: 'arc',// 内置边-圆弧线 label: 'arc', }, { source: '3', // String，必须，起始点 id target: '5', // String，必须，目标点 id }, { source: '4', // String，必须，起始点 id target: '5', // String，必须，目标点 id }]
效果如下：
4.交互模式
G6提供图的交互功能，而且内置了很多行为，可供用户直接调用。我们只需在实例中添加modes属性，首先可以添加默认的一些交互，比如缩放画布zoom-canvas，拖拽画布drag-canvas，拖拽节点drag-node。
// 交互
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
}
我们还可以为节点添加一些点击的视觉反馈，G6同样为我们提供了一些配置项。首先我们需要绑定事件，G6绑定事件的方法如下：
// G6 绑定事件
graph.on('元素：事件名', event => {
------
});
这样我们就可以通过代码实现节点选中以及鼠标悬浮的交互效果，同时要注意，可以通过findAllByState方法寻找选中的节点，在点击画布或者其他节点时，清除不需要的节点的选中状态，节点事件代码如下：
当然，不要忘记添加鼠标悬浮和点击的交互样式，也很简单。
最后看一下实现效果吧。
5.其他的配置项介绍
具体的配置项可以去官网查阅，在这里我简单列举
名称| 类型| 描述
------- | ------- | -------
fitView| Boolean| 是否开启画布自适应。开启后图自动适配画布大小。
modes| Object| 设置画布的模式。详情可见 G6 中的 Mode 文档。
defaultNode| Object| 默认状态下节点的配置，比如 shape, size, color。会被写入的 data 覆盖。
defaultEdge| Object| 默认状态下边的配置，比如 shape, size, color。会被写入的 data 覆盖。
animate| Boolean|是否启用全局动画。默认false。
layout| Object|布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre。
6.G6在react中的使用
示例如图（源码来自官网Demo，参考文档
在React中，通过可以通过ref.current获取DOM元素，通过useEffect完成实例化。
G6除了一些内置的属性外，还支持用户自定义边、节点以及一些交互等，功能很强大，可以实现叫高水准的可视化需求，感兴趣的同学可以都尝试一下。
