antv G6 + react umi(vue,ng) 实现节点红点（badges）

在我们使用G6做知识图谱，topo图时，业务场景一般会涉及到告警的节点要有突出标识，所谓红点，因为G6内置是不自带此功能的（虽然Graphin是可以直接用的，但基于G6的react框架），这样我们可以通过自定义节点来实现

效果图

 实现逻辑：

    // 自定义节点
    G6.registerNode(
      'markedNode',
      {
        afterDraw: (cfg, group) => {
           // 根据业务场景具体实现
          if (cfg.model.vul_stat.critical_count > 0) {
            group.addShape("circle", {
              attrs: {
                x: 22,
                y: -10,
                r: 5,
                fill: '#DC3545',
                lineWidth: 0.5,
                cursor: "pointer",
                stroke: '#DC3545',
              },
              name: "tag-circle"
            });
          }
          // 根据业务场景具体实现
          if (cfg.model.state == 'quarantined') {
            group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: 35,
                fillOpacity: 0.9,
                stroke: "red",
                strokeOpacity: 0.85,
                lineWidth: 1,
                label: 2,
              },
              draggable: true,
              name: 'stroke-shape',
              visible: false,
            });
          }

          const stroke = group.find((e) => e.get('name') === 'stroke-shape');
          stroke && stroke.show();
        },
      },
      'circle',
    );

defaultNode: {
        type: 'markedNode',
      },

自定义就可以多加很多判断，添加很多逻辑~~

⚠：graphin的用法也有总结~~~vue + antV G6 （GraphIn组件） 实现节点badges（徽标/消息通知）_zPeng-的博客-CSDN博客