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博客

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

React + umi +antd+antv/g6 实现力图
官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/n ...
antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能
antv/G6使用记录,vue组件实现节点.边的动态增减.右键事件等功能基本展示功能点: 特性: ==完整代码== ==示例数据== 补充说明: 基本展示 antv/G6是蚂蚁金服数据可视化团队 ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
项目中使用antv G6 实现节点链路之间动态效果
项目前端开发框架是使用VUE 项目需求:在不同的服务节点之间,根据不同的链路数据,显示出节点之间的链路状态,同时实现节点之间的动态效果. 先看效果 1 下载依赖包 # 使用CND引入 npm i @a ...
vue office在线编辑_VUE和Antv G6实现在线拓扑图编辑
我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. ...
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现 npm install @antv/g6 --save <template><div id="app">&l ...
AntV G6将节点修改成图片
1.在每个节点中添加图片代码布局如下: 实现效果如下图: 主要代码: defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40] ...
vue中使用antv/G6完成流程图
目录效果展示后台数据处理后台数据安装完整js代码效果展示自定义节点 G6.registerNode 根据后端返回数据生成流程图后台数据返回的类似数据,需要parentId数组即上级节 ...

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

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

最新文章

热门文章