前言
g6作为前端图形绘制真的使用种很棒的框架，刚用它开发项目的时候确实也走了不少弯路，以下将做一下相关g6的使用经验总结
认识G6
官网：g6.antv.antgroup.com/manual/intr…
元素（节点，边【线】），combo，图层实例Graph
操作元素方法：g6.antv.antgroup.com/api/items/i…
节点和边都属于元素的一种，所以操作元素的方法在这两种中都适用
操作元素的方法有增删查改以及修改元素的样式等
自定义节点【节点可以又多个元素组成】：通过节点可以获取组成该节点的所有元素
文档：g6.antv.antgroup.com/manual/midd…
自定义边【同上】
文档：g6.antv.antgroup.com/manual/midd…
自定义combo【同上】
文档：g6.antv.antgroup.com/manual/midd…
状态
节点、边、combo 都有状态，可以设置不同状态下的样式，可以设置初始状态样式，自定义状态下的样式
在G6.Graph实例中设置初始状态样式通过以下方式：
// 节点样式修改
type: "inner-animate", // 设置节点类型
size: [60, 60], // 节点大小
style: {},
stroke: "#54FF9F",
labelCfg: {
// 修改节点label样式
position: "left",
offset: 100,
style: {
// fill: "#5B8FF9", // 字体颜色
},
},
// icon: {
// show: true,
// },
},
defaultEdge: {
type: "circle-running",
style: {
lineWidth: 2, // 线宽
stroke: "#00ff60", // 线的颜色
endArrow: {
// 设置终点箭头
path: G6.Arrow.vee(5, 15, 15), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
d: 15,
},
},
},
defaultCombo: {//combo框配置
padding: [25, 25, 25, 25],
},
设置自定义状态下样式如下：
// highlight: {
// fill: "#db4437",
// shadowColor: "#fff",
// stroke: "#db4437",
// cursor: "pointer"
// },
// inactive: {
// opacity: 0.2,
// },
},
edgeStateStyles: {
// 配置边状态样式
// highlight: {
// // fill: "#54FF9F",
// // shadowColor: "#fff",
// stroke: "red",
// cursor: "pointer",
// },
},
comboStateStyles: {},
最后通过操作元素的方法可以动态修改状态开启和关闭
操作节点的方法，文档提供了如何操作节点，有对节点进行增删查改，以及获取当前节点直接相邻节点以及相邻边，以及是否锁定不让推拽等效果
文档：g6.antv.antgroup.com/api/items/n…
除此之外G6也提供了一些现成插件：开箱即用
文档：g6.antv.antgroup.com/api/plugins
