使用VUE和Antv G6實現在線拓撲圖編輯

發布時間：2020-10-29 15:50:58 來源：億速云閱讀：1386 作者：Leah 欄目：開發技術

本篇文章為大家展示了使用VUE和Antv G6實現在線拓撲圖編輯，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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', // 容器ID
height: 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); //是否為Node
self.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 }&#818; /* 驗證節點名稱*/ 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); }&#818; 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 &#63; 'left' : node.x > centerX &#63; 'right' : 'left', // 設置顯示左右
                offset: 5
              }
            };
          });
          graph.data(data);
          graph.render();
          graph.fitView();
        });

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

使用VUE和Antv G6實現在線拓撲圖編輯

上述內容就是使用VUE和Antv G6實現在線拓撲圖編輯，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

使用VUE和Antv G6實現在線拓撲圖編輯

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

使用VUE和Antv G6實現在線拓撲圖編輯

猜你喜歡

最新資訊

相關推薦

相關標簽