电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

VUE和Antv G6實現在線拓撲圖編輯操作

瀏覽:86日期:2022-11-09 18:28:49

效果圖如下:

VUE和Antv G6實現在線拓撲圖編輯操作

我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓撲圖單獨作為一個編輯器使用,使用更加方便。不過2.0的比較簡單,容易上手。

1.首先在Antv官網上找到螞蟻Antv G6插件,引入插件。

也可以npm 方式引入。

2.寫組件

export default {name: “index”,components: {},mounted() {this.initG6();},data() {return {action: ‘’,name: ‘’,func: ‘’,account: ‘’,workflow: ‘’,nodeType: 0,color: ‘’,net: ‘’,Util: ‘’,workflowName: ‘’,activation: ‘’, //當前激活的節點isNode: false, //當前是節點isBlank: true, //當前是空白區checked: true, //網格對齊infoTitle: ‘畫布’,//屬性標題oldColor: ‘’, //獲取節點本身顏色type: ‘’, //有值為編輯狀態actionList:[],nodeTypeList: [{id: 0, label: ‘普通節點’}]}},methods: {initG6() {let self = this;self.Util = G6.Util;let grid;if (self.checked) {grid = {forceAlign: true, // 是否支持網格對齊cell: 25, // 網格大小};} else {grid = null;}// 生成度量. . . . . .// 工具方法. . . . . .var sourcesData={ }; //后臺返回的數據var trainScale = function(dim, scale){var max = -Infinity;var min = Infinity;sourcesData.source.nodes.map(function(node){max =30;min =25;});scale.domain([min, max]);};var colors = [’#007AE7’, ‘#40BCD2’, ‘#81D6C3’, ‘#C1E4BC’, ‘#FFDD9B’, ‘#FEAC4C’, ‘#FF7C01’, ‘#C4201D’];. . . . . .// 生成圖http://self.net = new http://G6.Net({id: ‘knowledge’, // 容器IDheight: canvasHeight, // 畫布高mode: ‘edit’});G6.Global.nodeLabelStyle = {fill: ‘#fff’,textAlign: ‘left’,textBaseline: ‘bottom’,fontSize:24};self.net.tooltip(true);self.net.node().size(function(model){return sizeScale(model.weight)*2;});self.net.source(sourcesData.source.nodes, sourcesData.source.edges);self.net.removeBehaviour([‘dragCanvas’, ‘dragHideEdges’, ‘dragHideTexts’]);self.net.addBehaviour([‘dragBlank’]);self.net.read(sourcesData);self.net.render();self.net.zoomAt(graphCenterX, graphCenterY, 0.7);// 生成布局var layoutNodes = sourcesData.source.nodes;var layoutEdges = Util.clone(sourcesData.source.edges);var ticked = function(){self.net.updateNodesPosition();};…/**點擊空白處/self.net.on(‘click’, (ev) => {if (!self.Util.isNull(ev.item)) {self.isBlank = false} else {self.isBlank = true;self.infoTitle = ‘畫布’}});/點擊節點/self.net.on(‘itemclick’, function (ev) {self.isNode = self.Util.isNode(ev.item); //是否為Nodeself.activation = ev.item;if (self.isNode) {/ 激活節點后節點名稱input聚焦/self.KaTeX parse error: Expected ’}’, got ’EOF’ at end of input: …ick(()=>{ self.refs.inputFocus.$el.querySelector(‘input’).focus();});self.infoTitle = ‘節點’;self.name = ev.item.get(‘model’).label;self.func = ev.item.get(‘model’).func;self.account = ev.item.get(‘model’).account || [];self.workflow = ev.item.get(‘model’).workflow;} else {self.infoTitle = ‘邊’;self.action = ev.item.get(‘model’).action;}self.color = self.oldColor;});/**鼠標移入移出事件改變顏色/self.net.on(‘itemmouseenter’, ev => {const item = ev.item;self.oldColor = item.get(‘model’).color; //獲取節點顏色self.net.update(item, {color: ‘#108EE9’,});self.net.refresh();});self.net.on(‘itemmouseleave’, ev => {const item = ev.item;self.net.update(item, {color: self.oldColor});self.net.refresh();});/*提示信息*/self.net.tooltip({title: ‘信息’, // @type {String} 標題split: ‘:’, // @type {String} 分割符號dx: 0, // @type {Number} 水平偏移dy: 0 // @type {Number} 豎直偏移});self.net.edge().tooltip() .size(‘val’, function(val){return 3;});/**渲染*//self.net.source(self.nodes, self.edges);/ //加載資源數據// self.net.render();},addCircle() {},//添加起始節點addRect() {},//添加常規節點addRhombus() {}, //添加條件節點addLine() {}, //添加直線addSmooth() {}, //添加曲線addArrowSmooth() {}, //添加箭頭曲線addArrowLine() {}, //添加箭頭直線addPolyLine() {}, //添加折線changeMode(mode) {}, //拖拽與編輯模式的切換del() {this.net.del()},//刪除save() {/* 驗證流圖名稱*/if (this.workflowName !== ‘’) {let data = this.net.save();if (data.source.nodes.length === 0) {this.KaTeX parse error: Expected ’EOF’, got ’}’ at position 61: …; return false }̲ /* 驗證節點名稱*/ fo…message({type: ‘error’, message: ‘節點名稱不能為空’});return false}}data.source[‘name’] = this.workflowName;/let json = JSON.stringify(data, null, 2);/this.KaTeX parse error: Expected ’EOF’, got ’}’ at position 43: …e, this.type); }̲ else { this.message({type: ‘error’, message: ‘拓撲名稱不能為空’})}/console.log(saveData, json);/},//保存update() {}, //更新節點clearView() {this.type = ‘’;this.workflowName = ‘’;this.net.changeData()}, //清空視圖source(nodes, edges, name, type) {this.type = type;this.workflowName = name;this.net.changeData(nodes, edges)}, //更新數據},watch: {/**監聽輸入框/action: function () {this.update()},name: function () {this.update()},func: function () {this.update()},account: function () {this.update()},workflow: function () {this.update()},nodeType: function () {this.update()},color: function () {this.update()},/*網格切換*/checked: function () {let _saveData = this.net.save();this.net.destroy(); //銷毀畫布this.initG6();this.net.read(_saveData);this.net.render()}}}

3.注意:

在實現過程中,我采用了度量的生成方法使節點均勻分布,否則需要指定節點的位置。不指定位置頁面不會顯示任何東西。

補充知識:antv G6關系樹,拓撲圖 不同層級不同顏色

前端菜雞… 近期遇到一個需求,要求關系圖每個層級不同顏色展示,位置還得隨機,目前echart實現后都不太滿意…em 于是G6 …

廢話不多說 看代碼(效果)//

1、引入G6 相關 (基礎數據是官方的)

import G6 from ’@antv/g6’ fetch(’https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json’).then(res => res.json()).then(data => { console.log(data) const width = document.getElementById(’map’).scrollWidth; const height = document.getElementById(’map’).scrollHeight || 500; const graph= new G6.TreeGraph({ container: ’map’, width, height, pixelRatio: 2, modes: { default: [{type: ’collapse-expand’,onChange: function onChange(item, collapsed) { console.log(item) const data = item.get(’model’).data; data.collapsed = collapsed; return true;} }, ’drag-canvas’, ’zoom-canvas’] }, defaultNode: { size: [200, 50], shape: ’rect’, style: {fill: ’#C6E5FF’,stroke: ’#5B8FF9’ } }, defaultEdge: { shape: ’cubic-horizontal’, style: {stroke: ’#A3B1BF’ } }, layout: { type: ’mindmap’, direction: ’H’, getHeight: () => {return 40; }, getWidth: () => {return 160; }, getVGap: () => {return 10; }, getHGap: () => {return 100; } } }); let centerX = 0; // 以下重點 graph.node(function (node) { // depth 類似節點標識 if(node.depth == 0){ console.log(node) return {size:[100,60],style:{ fill:’red’, // stroke:’’},label:node.id } } if(node.depth == 1){ console.log(node) return {size:[100,60],style:{ fill:’blue’, },label:node.id } } return { label: node.id, // 設置顯示名稱 labelCfg: {// position: node.children && node.children.length > 0 ? ’left’ : node.x > centerX ? ’right’ : ’left’, // 設置顯示左右offset: 5 } }; }); graph.data(data); graph.render(); graph.fitView();});

這樣效果就出來了. 不同級不同顏色 看圖

VUE和Antv G6實現在線拓撲圖編輯操作

以上這篇VUE和Antv G6實現在線拓撲圖編輯操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 「安徽双凯」自动售货机-无人售货机-成人用品-自动饮料食品零食售货机 | 北京燃气公司 用户服务中心| 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 电磁辐射仪-电磁辐射检测仪-pm2.5检测仪-多功能射线检测仪-上海何亦仪器仪表有限公司 | 郑州外墙清洗_郑州玻璃幕墙清洗_郑州开荒保洁-河南三恒清洗服务有限公司 | 耐高温电缆厂家-远洋高温电缆| 丹佛斯变频器-Danfoss战略代理经销商-上海津信变频器有限公司 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | NM-02立式吸污机_ZHCS-02软轴刷_二合一吸刷软轴刷-厦门地坤科技有限公司 | 铜镍-康铜-锰铜-电阻合金-NC003 - 杭州兴宇合金有限公司 | 自动部分收集器,进口无油隔膜真空泵,SPME固相微萃取头-上海楚定分析仪器有限公司 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 艺术生文化课培训|艺术生文化课辅导冲刺-济南启迪学校 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 内窥镜-工业内窥镜厂家【上海修远仪器仪表有限公司】 | 隆众资讯-首页_大宗商品资讯_价格走势_市场行情 | 吸污车_吸粪车_抽粪车_电动三轮吸粪车_真空吸污车_高压清洗吸污车-远大汽车制造有限公司 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 飞象网 - 通信人每天必上的网站| 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 打孔器,打孔钳厂家【温州新星德牌五金工具】 | 河南中专学校|职高|技校招生-河南中职中专网 | 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 散热器-电子散热器-型材散热器-电源散热片-镇江新区宏图电子散热片厂家 | 长春网站建设,五合一网站设计制作,免费优化推广-长春网站建设 | 磁力反应釜,高压釜,实验室反应釜,高温高压反应釜-威海自控反应釜有限公司 | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 | 滁州高低温冲击试验箱厂家_安徽高低温试验箱价格|安徽希尔伯特 | 防爆电机_ybx3系列电机_河南省南洋防爆电机有限公司 | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 华夏医界网_民营医疗产业信息平台_民营医院营销管理培训 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 北京签证代办_签证办理_商务签证_旅游签证_寰球签证网 | 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 南京雕塑制作厂家-不锈钢雕塑制作-玻璃钢雕塑制作-先登雕塑厂 | 深圳工程师职称评定条件及流程_深圳职称评审_职称评审-职称网 | 电镀电源整流器_高频电解电源_单脉双脉冲电源 - 东阳市旭东电子科技 |