Antv G6超详细笔记及使用案例分享

大家好，欢迎来到IT知识分享网。

目录

提示：因为官网内容繁多，一些常用的api不太好找且不太详细，所以整理此份笔记分享，下面案例可供参考

一、Antv G6是什么？

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

• 应用: 常见图的类型：关系图、流程图、DAG 图、血缘图、ER 图、树状图。

二、常用API

1. 获取所有节点（nodes）信息

graph.value.getNodes()

2. 通过ID查询节点实例

const item = graph.findById('node');

3. updateItem更新节点

const item = graph.findById('node'); graph.updateItem(item, model);

4. refreshItem更新节点信息

const item = graph.findById('node'); // .... 修改内容 graph.refreshItem(item); 

4. 生命周期update更新节点信息

const item = graph.findById('node'); let model = item.getModel(); // ... 修改内容 item.update(model); -------------------------------- // 在register中的update update(cfg, node) { // 若未指定registerNode的第三个参数并且未定义update方法时，则节点更新时会执行 draw 方法，所有图形清除重绘 if (item.type === 9 && cfg.attrs) { // 定义更新文本节点的方法 node.get('keyShape').attrs.text = cfg.attrs.text node.get('keyShape').attrs.fill = cfg.attrs.fill // 或者 const group = node.getContainer(); // 获取容器 const shape = group.get('children')[2]; // 按照添加的顺序 // const style = { // path: this.getPath(cfg), // stroke: cfg.color, // }; // shape.attr(style); // 更新属性 shape.attr({text: cfg.label}) } },

5.节点的连接点

new G6.Graph({ container: "mountNode", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身 defaultNode: { type: "custom-node", anchorPoints: [ [1, 0.5], [0, 0.5], ], style: { radius: [5], }, }, })

6.更新边

<!-- 1.获取所有的边 --> const allEdges = graph.value.getEdges(); console.log(allEdges, 'allEdges'); allEdges.forEach((edge) => { // 2.获取边的id // console.log('Edge ID:', edge.getID()); // 3.刷新边状态 graph.value.refreshItem(edge); });

5.设置层间距

layout: { type: 'dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 0.01, ranksep: 0.1, // nodesepFunc: () => 1, // ranksepFunc: () => 1, },

6.使用setState更新

7.自定义箭头绘制方式

8.afterdraw获取元素宽度、位置信息(getBBox)

afterDraw(cfg, group) { const paginaContainer = group.get('children'); // console.log(paginaContainer, 'paginaContainer'); const totalShape = paginaContainer[9]?.find((el) => el.get('name') === nodeName.paginaTotal); console.log(totalShape, 'totalShape', totalShape?.getBBox()); },

三、使用案例

1.点击节点相关连线高亮

graph.on('node:click'