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

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

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

瀏覽:84日期: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
相關文章:
主站蜘蛛池模板: 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | 广州市哲铭油墨涂料有限公司,水性漆生产研发基地 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 高精度-恒温冷水机-螺杆式冰水机-蒸发冷冷水机-北京蓝海神骏科技有限公司 | 东莞压铸厂_精密压铸_锌合金压铸_铝合金压铸_压铸件加工_东莞祥宇金属制品 | 噪声治理公司-噪音治理专业隔音降噪公司 | 烟台游艇培训,威海游艇培训-烟台市邮轮游艇行业协会 | 陕西安玻璃自动感应门-自动重叠门-磁悬浮平开门厂家【捷申达门业】 | 深圳标识制作公司-标识标牌厂家-深圳广告标识制作-玟璟广告-深圳市玟璟广告有限公司 | 有机废气处理-rto焚烧炉-催化燃烧设备-VOC冷凝回收装置-三梯环境 | 恒温振荡混匀器-微孔板振荡器厂家-多管涡旋混匀器厂家-合肥艾本森(www.17world.net) | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 面粉仓_储酒罐_不锈钢储酒罐厂家-泰安鑫佳机械制造有限公司 | 北钻固控设备|石油钻采设备-石油固控设备厂家 | 天津暖气片厂家_钢制散热器_天津铜铝复合暖气片_维尼罗散热器 | 水质传感器_水质监测站_雨量监测站_水文监测站-山东水境传感科技有限公司 | 河南包装袋厂家_河南真空袋批发价格_河南服装袋定制-恒源达包装制品 | 冻干机(冷冻干燥机)_小型|实验型|食品真空冷冻干燥机-松源 | 转子泵_凸轮泵_凸轮转子泵厂家-青岛罗德通用机械设备有限公司 | 海南在线 海南一家| 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 西宁装修_西宁装修公司-西宁业之峰装饰-青海业之峰墅级装饰设计公司【官网】 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 电线电缆厂家|沈阳电缆厂|电线厂|沈阳英联塑力线缆有限公司 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 济南网站策划设计_自适应网站制作_H5企业网站搭建_济南外贸网站制作公司_锐尚 | 茅茅虫AI论文写作助手-免费AIGC论文查重_写毕业论文降重 | 润东方环保空调,冷风机,厂房车间降温设备-20年深圳环保空调生产厂家 | 南京交通事故律师-专打交通事故的南京律师 | 井式炉-台车式回火炉-丹阳市电炉厂有限公司 | 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 赛尔特智能移动阳光房-阳光房厂家-赛尔特建筑科技(广东)有限公司 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 全自动包衣机-无菌分装隔离器-浙江迦南科技股份有限公司 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 超声波成孔成槽质量检测仪-压浆机-桥梁预应力智能张拉设备-上海硕冠检测设备有限公司 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 |