Antv G6 图例 实现点击‘指定节点’对应节点放大缩小动画

找到满足要求的节点 此处我自己写死的，根据自己业务去修改

this.graph.on('node:click', (evt) => {
  // 放大缩小方法
  if (evt.item._cfg.model.id === '9') {
    const node = this.graph.findById('8');
    console.log(node);
    this.graph.updateItem(node, {
      attrs: {
        time: '1'
      }
    });
  }

要实现放大缩小动画就要使用自定义节点方法， 用上面this.graph.updateItem接收到的attrs.time去判断G6A collection of charts made with the Grammar of Graphicshttps://g6.antv.antgroup.com/manual/middle/elements/nodes/custom-node

registerNode() {
  G6.registerNode( // registerNode自定义节点
    'circle-animate',
    {
      draw(cfg, group) { // draw绘制图片
        const keyShape  = group.addShape('image', {
          attrs: {
            x: 0, //图片在x轴的位置
            y: -3,
            width: 7,
            height: 7,
            img: cfg.img,
            label: cfg.label
          },
          name: cfg.label,
        });
        if (cfg.label) {
          // 如果有文本
          // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
          // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
          // style.text = cfg.label;
          const label = group.addShape('text', {
            // attrs: style
            attrs: {
              x: 3, //文本在x轴的位置
              y: 10,
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.label,
              fill: '#fff',
              fontSize: 4
            },

            name: 'text-shape',
            // 设置 draggable 以允许响应鼠标的图拽事件
            draggable: true,
          });
        }
        const attrs = cfg.attrs as any;
        if (attrs?.time) {
          keyShape.animate(
            (ratio) => {
              const diff = ratio <= 0.5 ? ratio : (1 - ratio);
              // [2,2] [1,1]
              const toMatrix = Util.transform(
                [1, 0, 0, 0, 1, 0, 0, 0, 1],
                [['s', 1 / 2 + diff, 1 / 2 + diff]],
              );
              return {
                matrix: toMatrix,
              };
            },
            {
              // 动画重复
              repeat: true,
              duration: 3000,
              easing: 'easeCubic',
            },
          );
        }
        return keyShape;
      },
    },
  );
}