Antv G6动态更新自定义节点数据

背景

由于公司项目需求，最近研究了一下使用蚂蚁的antv G6来构建拓扑图。

成果实例

 

由于很多个性需求，所以图中的各种edge和node都是使用G6.registerNode和G6.registerEdge两个方法来自定义的。下面贴一下我自定义节点和边的代码片段。

     G6.registerNode(item.iconName, {
          draw(cfg, group) {
            if (item.iconName === 'warning1') {
              // 警报灯使用字体图标（制作闪烁动画）
              // 定义字体图标
              const keyShape = group.addShape('text', {
                attrs: {
                  x: 0,
                  y: 0,
                  fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
                  textAlign: 'center',
                  textBaseline: 'middle',
                  text: '\ue60e', // 具体图标
                  fontSize: item.size,
                  fill: '#eaa153'
                },
                // must be assigned in G6 3.3 and later versions. it can be any value you want
                name: item.type
              })
              // 添加闪烁动画
              keyShape.animate(
                (ratio) => {
                  const color = ratio > 0.5 ? '#eaa153' : '#f83f3f'
                  return {
                    fill: color
                  }
                },