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

目录

一、Antv G6是什么？

二、常用API

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

2. 通过ID查询节点实例

3. updateItem更新节点

4. refreshItem更新节点信息

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

5.节点的连接点

6.更新边

5.设置层间距

6.使用setState更新

7.自定义箭头绘制方式

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

三、使用案例

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

2.分页

3.放大缩小全屏

4.tooltip提示

四、遇到的问题

1.自定义dom事件绑定及传参

2.antv g6挂载vue组件

3.性能优化 

总结

---

提示：因为官网内容繁多，一些常用的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'