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

zPeng-

已于 2022-09-08 16:25:23 修改

阅读量1.3k

点赞数

文章标签： react.js 前端前端框架

于 2022-09-08 15:11:33 首次发布

本文链接：https://blog.csdn.net/weixin_43319667/article/details/126764860

版权

在我们使用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 == 'quar

最低0.47元/天解锁文章