首先先奉上官方文档地址，官方文档写的很详细，清晰易懂，本文用于记录个人学习G6的过程
G6的简单使用
使用G6的第一步当然是在项目中安装
npm i @antv/g6
#或
yarn add @antv/g6
当然也可以用CDN方式引入，官方文档写的很详细
然后就是引入
import G6 from '@antv/g6';
接下来创建一个承载容器
准备一些简单的数据
export const data = {
// 点集
nodes: [
{
id: 'node1', // String，该节点存在则必须，节点的唯一标识
x: 100, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
},
{
id: 'node2', // String，该节点存在则必须，节点的唯一标识
x: 300, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
},
],
// 边集
edges: [
{
source: 'node1', // String，必须，起始点 id
target: 'node2', // String，必须，目标点 id
},
],
};
然后创建一个G6实例，并把数据传入然后渲染
// 创建 G6 图实例
const graph = new G6.Graph({
container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
// 画布宽高
width: 800,
height: 500,
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
OKfine，接下来我们来在React项目中使用G6
首先新建一个React项目，我这里用的是vite来搭建
npm create vite@latest my-react-app --template react
然后安装G6以及其他基本依赖，安装完成后我们先创建一个组件，并在组件中引入G6和相关react的Hooks
import React ,{useEffect,useRef,useState}from 'react'
import G6 from '@antv/g6'
export const Container = () => {
return (
)
}
接下来准备一份基础数据
export const data = {
// 点集
nodes: [
{
id: 'node1', // String，该节点存在则必须，节点的唯一标识
x: 100, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
label:"节点一"
},
{
id: 'node2', // String，该节点存在则必须，节点的唯一标识
type:'rect',//节点类型，默认为圆circle
x: 300, // Number，可选，节点位置的 x 值
y: 200, // Number，可选，节点位置的 y 值
label:"节点二"
},
{
id: 'node3', // String，该节点存在则必须，节点的唯一标识
type:'modelRect',
x: 700, // Number，可选，节点位置的 x 值
y: 800, // Number，可选，节点位置的 y 值
label:"节点三"
},
{
id: 'node4', // String，该节点存在则必须，节点的唯一标识
type:'star',
x: 400, // Number，可选，节点位置的 x 值
y: 500, // Number，可选，节点位置的 y 值
label:"节点四"
},
{
id: 'node5', // String，该节点存在则必须，节点的唯一标识
type:'triangle',
x: 300, // Number，可选，节点位置的 x 值
y: 300, // Number，可选，节点位置的 y 值
label:"节点五"
},
{
id: 'node6', // String，该节点存在则必须，节点的唯一标识
type:'diamond',
x: 600, // Number，可选，节点位置的 x 值
y: 100, // Number，可选，节点位置的 y 值
label:"节点六"
},
{
id: 'node7', // String，该节点存在则必须，节点的唯一标识
type:'ellipse',
x: 700, // Number，可选，节点位置的 x 值
y: 700, // Number，可选，节点位置的 y 值
label:"节点七"
},
{
id: 'node8', // String，该节点存在则必须，节点的唯一标识
type:'image',
x: 700, // Number，可选，节点位置的 x 值
y: 700, // Number，可选，节点位置的 y 值
label:"节点八"
},
{
id: 'node9', // String，该节点存在则必须，节点的唯一标识
type:'donut',
x: 700, // Number，可选，节点位置的 x 值
y: 700, // Number，可选，节点位置的 y 值
label:"节点九"
}
],
// 边集
edges: [
{
source: 'node1', // String，必须，起始点 id
target: 'node2', // String，必须，目标点 id
},
{
source: 'node1', // String，必须，起始点 id
target: 'node3', // String，必须，目标点 id
},
{
source: 'node3', // String，必须，起始点 id
target: 'node2', // String，必须，目标点 id
},
{
source: 'node4', // String，必须，起始点 id
target: 'node7', // String，必须，目标点 id
},
{
source: 'node6', // String，必须，起始点 id
target: 'node1', // String，必须，目标点 id
},
{
source: 'node2', // String，必须，起始点 id
target: 'node5', // String，必须，目标点 id
},
{
source: 'node6', // String，必须，起始点 id
target: 'node8', // String，必须，目标点 id
},
{
source: 'node4', // String，必须，起始点 id
target: 'node8', // String，必须，目标点 id
},
{
source: 'node1', // String，必须，起始点 id
target: 'node9', // String，必须，目标点 id
},
{
source: 'node5', // String，必须，起始点 id
target: 'node8', // String，必须，目标点 id
},
{
source: 'node8', // String，必须，起始点 id
target: 'node9', // String，必须，目标点 id
},
],
};
引入组件后，我们开始结合hooks生成实例，挂在的选定容器上，下面是组件完整代码
import React, { useEffect, useRef, useState } from 'react'
import G6 from '@antv/g6'
import { data } from '../config/data'
export const Container = () => {
const container = useRef(null)
let graph = null
useEffect(() => {
if (!graph) {
graph = new G6.Graph({
container: container.current,
width: 1000,
height: 1000,
fitView: true,//是否开启画布自适应，默认为false，当你某些节点超出画布大小后可以开启
modes: {
default: ['drag-canvas', 'zoom-canvas']
}
})
graph.data(data)
graph.render()
}
}, [])
return (
)
}
然后我们引入到根组件中并运行项目，浏览器就会出现下面的效果
![]( "刘谷武 > antv/G6的学习 > image-2023-10-27_15-26-55.png")
自定义节点
当内置节点无法满足要求时，我们可以自定义节点去满足我们的需求
typeName：该新节点类型名称；
extendedNodeType：被继承的节点类型，可以是内置节点类型名，也可以是其他自定义节点的类型名。extendedNodeType 未指定时代表不继承其他类型的节点；
nodeDefinition：该新节点类型的定义，其中必要函数详见 自定义机制 API。当有 extendedNodeType 时，没被复写的函数将会继承 extendedNodeType 的定义
更多配置属性可前往官网查找
