Cytoscape在vue中安装实例

Cytoscape在vue中安装实例

二月 11, 2019

首先创建vue项目,并在项目下安装Cytoscape包

1
2
3
vue create test #创建vue项目
cd test
npm i cytoscape --save #加载cytoscape模块

创建index.vue文件并且写入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<div id="cy" style="width: 100%;height: 100%;"></div>
</template>

<script>
var cytoscape = require("cytoscape");

export default {
name: "Cytoscape",
components: {},
created: function() {},
data: function() {
return {
input: "",
output: "",
msg: "vue to cytoscape",
count: 0
};
},
methods: {
add_node: function() {
console.info(this.cy);
this.cy.add([
{
group: "nodes",
data: { id: "node" + this.count },
position: { x: 300, y: 200 }
},
{
group: "edges",
data: {
id: "edge" + this.count,
source: "node" + this.count,
target: "cat"
}
}
]);
},
view_init: function() {
this.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape
.stylesheet()
.selector("node")
.css({
height: 80,
width: 80,
"background-fit": "cover",
"border-color": "#000",
"border-width": 3,
"border-opacity": 0.5,
content: "data(id)",
"text-valign": "center"
})
.selector(".aa")
.css({
height: 80,
width: 80,
"background-fit": "cover",
"border-color": "red",
"border-width": 3,
"border-opacity": 0.5,
"background-color": "red",
content: "data(id)",
"text-valign": "center",
"line-color": "red",
})

.selector("edge")
.css({
width: 6,
"target-arrow-shape": "triangle",
"line-color": "#ffaaaa",
"target-arrow-color": "#ffaaaa",
"curve-style": "bezier"
})
.selector(".bb")
.css({
"line-color": "#000",
}),

elements: {
nodes: [
{ data: { id: "cat" }, classes: ["aa"] },
{ data: { id: "bird" } },
{ data: { id: "ladybug" } },
{ data: { id: "aphid" } },
{ data: { id: "rose" } },
{ data: { id: "grasshopper" } },
{ data: { id: "plant" } },
{ data: { id: "wheat" } }
],
edges: [
{ data: { source: "cat", target: "bird" }, classes: ["bb"] },
{ data: { source: "bird", target: "ladybug" } },
{ data: { source: "bird", target: "grasshopper" } },
{ data: { source: "grasshopper", target: "plant" } },
{ data: { source: "grasshopper", target: "wheat" } },
{ data: { source: "ladybug", target: "aphid" } },
{ data: { source: "aphid", target: "rose" } }
]
},
layout: {
name: "breadthfirst",
directed: true,
padding: 10
}
});
}
},
computed: {},
mounted: function() {
this.view_init();
}
};
</script>
<style scoped>
#cy {
width: 100%;
height: 80%;
position: absolute;
top: 50px;
left: 0px;
text-align: left;
}
.aa {
color: red;
}

body {
/* font: 14px helvetica neue, helvetica, arial, sans-serif; */
}
</style>

一个简单的示例就创建成功了,具体内容可以根据自己的需求来修改。