vueのcytoscape.jsの使用
8395 ワード
“jquery”: “^3.4.1”, “cytoscape”: “^3.8.2”, “cytoscape-context-menus”: “^3.0.0”, “cytoscape-cose-bilkent”: “^4.1.0”, “cytoscape-spread”: “^3.0.0”, インストール:npm i cytoscape--save 2.メールでjsはimport cytoscape from「cytoscape」を導入する.Vue.prototype.$cytoscape = cytoscape; 3.リレーショナルマップのダウンロード
関係図の操作説明
export default{name:‘relation’,data(){return////ノード間の接続をクリックすると、関連詳細recordView:false,radio:‘1’,detailInfos:{},color:’#1 E 9 FFF’,nodes:[], edges:[],tushow:true,getdata:null,queryObj:{},},methods:{init(data){var self=this;self.color=’#1 E 9 FFF’’,{1 E 9 FFF’,}}},methods:{init(data){var self=this;self.color='#1 E 9 FFF’1;self.getdata=data;self.getRelationData(self.getdata)}getRelationData(data){var self=this;self.queryObj.featureType 1=data.featureType,self.queryObj.featureType 2='2,self.queryObj.feature 1=data.fileId,self.queryObj.relationshipType=self.relationshipType,self.relationshipType,self.queryObj.top=6//クエリ数serach(self.queryObj)(res=>{if(res.data.data.nodes="){this.$alert(‘暫定データ’,‘情報’,{confirmButtonText:‘OK’});this.initCytoscape([],[]); return false}else{this.tushow=true var resultData=res.data;//ノードself.addNodes(resultData))の追加
}
関係図の操作説明
export default{name:‘relation’,data(){return////ノード間の接続をクリックすると、関連詳細recordView:false,radio:‘1’,detailInfos:{},color:’#1 E 9 FFF’,nodes:[], edges:[],tushow:true,getdata:null,queryObj:{},},methods:{init(data){var self=this;self.color=’#1 E 9 FFF’’,{1 E 9 FFF’,}}},methods:{init(data){var self=this;self.color='#1 E 9 FFF’1;self.getdata=data;self.getRelationData(self.getdata)}getRelationData(data){var self=this;self.queryObj.featureType 1=data.featureType,self.queryObj.featureType 2='2,self.queryObj.feature 1=data.fileId,self.queryObj.relationshipType=self.relationshipType,self.relationshipType,self.queryObj.top=6//クエリ数serach(self.queryObj)(res=>{if(res.data.data.nodes="){this.$alert(‘暫定データ’,‘情報’,{confirmButtonText:‘OK’});this.initCytoscape([],[]); return false}else{this.tushow=true var resultData=res.data;//ノードself.addNodes(resultData))の追加
},
//
initCytoscape(dataA,dataB){
var self = this;
self.cy = cytoscape({
container: document.getElementById('photo'),
layout: {
fit: true,//
name: 'concentric',//
minNodeSpacing: 80,//
maxNodeSpacing: 120,//
padding: 30, // the padding on fit
animate: true,
minNodeSpacing: 180,//
},
style: [{selector: 'node',
css: {
'curve-style': 'bezier',
'label':'data(nodename)',
'background-image': 'data(color)',
'background-fit': 'cover',
'color':'data(textColor)',
'width': 50,
'height': 50,
//'font-size':6// ， 7 ，
}
},
{selector: 'edge',
css: {
'curve-style': 'bezier',
'label':'data(percentum)',
'width': 1,
'line-color': self.color,
//'font-size':6/ ，
}
},
],
elements: {
nodes: dataA,
edges: dataB
}
});
//
self.cy.contextMenus({
menuItems: [
{
id: 'remove',
content: ' ',
tooltipText: ' ',
selector: 'node',
onClickFunction: function (event) {
if(event.target._private.data.featureType =='2'){
self.queryObj.featureType1=event.target._private.data.featureType,
self.queryObj.featureType2 ='2,3',
self.queryObj.feature1 =event.target._private.data.feature,
self.queryObj.relationshipType=self.relationshipType,
self.queryObj.top=6
}
serach(self.queryObj).then(res =>{
var clickresult = res.data.data;
self.addNodes(clickresult)
})
}
},
{
id: 'hide',
content: ' ',
tooltipText: ' ',
selector: 'node',
onClickFunction: function (event) {
var obj={}
if(event.target._private.data.featureType == '2'){
obj.imgUrl = event.target._private.data.imgUrl;
obj.type = event.target._private.data.featureType
obj.createTime = event.target._private.data.createTime;
obj.updateTime = event.target._private.data.updateTime;
obj.archiveCode = event.target._private.data.nodename;
}
self.viewMore(obj)
}
},
]
});
// ，
self.cy.on('tap','node',function(evt){
var obj={}
if(evt.target._private.data.featureType == '23'){
obj.imgUrl = evt.target._private.data.imgUrl;
obj.type = evt.target._private.data.featureType;
obj.createTime = evt.target._private.data.createTime;
obj.updateTime = evt.target._private.data.updateTime;
obj.archiveCode = evt.target._private.data.nodename;
}
self.viewMore(obj)
});
self.cy.on('tap','edge',function(evt){
var obj = {
id:evt.target._private.data.id,
relatonship:evt.target._private.data.percentum,
type:evt.target._private.data.type
}
// if(this.radio == 2){
// self.viewMore(obj)
// }
});
},
//
createPicture() {
if($('.photo').html()==''){
this.$alert(' ', ' ', {
confirmButtonText: ' '
});
return false
}
html2canvas(document.getElementById('photo')).then(canvas => {
this.imgmap = canvas.toDataURL()
console.log(999, this.imgmap)
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(this.imgmap.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
// chrome
const a = document.createElement('a')
a.href = this.imgmap
a.setAttribute('download', 'chart-download')
a.click()
}
});
},
//
viewMore(e){
var self = this;
self.detailInfos = e;
self.recordView = true;
},
//
addNodes(data_1){
var self = this;
self.nodes = [];
self.edges = [];
for(var i = 0; i< data_1.nodes.length; i++){
if(data_1.nodes[i].featureType == "2"){
data_1.nodes[i].color = data_1.nodes[i].imgUrl;
data_1.nodes[i].nodename = data_1.nodes[i].profileName
}
data_1.nodes[i].textColor = "#000"
var obj = {};
obj.data= data_1.nodes[i];
obj.classes='l1'
self.nodes.push(obj);
}
for(var j=0;j}