-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcyto-test.html
59 lines (56 loc) · 1.94 KB
/
cyto-test.html
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
<html>
<head>
<title>Graph Test</title>
<script src="/scripts/jquery.js"></script>
<script src="/scripts/cytoscape.js"></script>
</head>
<body>
<div id="cy" style="height: 800px; width: 2400px;"></div>
<script>
$.ajax({
dataType: "json",
url: "/data/graph.json",
success: function(data, status, xhr) {
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 2,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bffc',
'line-color': '#61bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: data,
layout: {
name: 'concentric',
directed: true,
animate: true,
animationDuration: 1000,
avoidOverlap: true,
concentric: function() {
return this.degree();
},
levelWidth: function(nodes) {
return 0.2;
},
padding: 10
}
});
}
});
</script>
</body>
</html>