-
Notifications
You must be signed in to change notification settings - Fork 0
/
graph_animations.html
127 lines (103 loc) · 4.17 KB
/
graph_animations.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
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
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 1400px;
height: 800px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
var set = [
{"id":1,"x":400,"y":0,"label":1, "color": "red", "font": {"color": "white"}}
,{"id":2,"x":396.8459,"y":50.2324,"label":2}
,{"id":3,"x":387.4333,"y":99.6726,"label":3}
,{"id":4,"x":371.9106,"y":147.541,"label":4}
,{"id":5,"x":350.5227,"y":193.0825,"label":5}
,{"id":6,"x":323.6068,"y":235.579,"label":6}
,{"id":7,"x":291.5875,"y":274.3602,"label":7}
,{"id":8,"x":254.9696,"y":308.8147,"label":8}
,{"id":9,"x":214.3307,"y":338.3989,"label":9}
,{"id":10,"x":170.3117,"y":362.6464,"label":10}
,{"id":11,"x":123.6068,"y":381.1748,"label":11}
,{"id":12,"x":74.9525,"y":393.6918,"label":12}
,{"id":13,"x":25.1162,"y":400,"label":13}
,{"id":14,"x":-25.1162,"y":400,"label":14}
,{"id":15,"x":-74.9525,"y":393.6918,"label":15}
,{"id":16,"x":-123.6068,"y":381.1748,"label":16}
,{"id":17,"x":-170.3117,"y":362.6464,"label":17}
,{"id":18,"x":-214.3307,"y":338.3989,"label":18}
,{"id":19,"x":-254.9696,"y":308.8147,"label":19}
,{"id":20,"x":-291.5875,"y":274.3602,"label":20}
,{"id":21,"x":-323.6068,"y":235.579,"label":21}
,{"id":22,"x":-350.5227,"y":193.0825,"label":22}
,{"id":23,"x":-371.9106,"y":147.541,"label":23}
,{"id":24,"x":-387.4333,"y":99.6726,"label":24}
,{"id":25,"x":-396.8459,"y":50.2324,"label":25}
,{"id":26,"x":-400,"y":-1.1369e-013,"label":26}
,{"id":27,"x":-396.8459,"y":-50.2324,"label":27}
,{"id":28,"x":-387.4333,"y":-99.6726,"label":28}
,{"id":29,"x":-371.9106,"y":-147.541,"label":29}
,{"id":30,"x":-350.5227,"y":-193.0825,"label":30}
,{"id":31,"x":-323.6068,"y":-235.579,"label":31}
,{"id":32,"x":-291.5875,"y":-274.3602,"label":32}
,{"id":33,"x":-254.9696,"y":-308.8147,"label":33}
,{"id":34,"x":-214.3307,"y":-338.3989,"label":34}
,{"id":35,"x":-170.3117,"y":-362.6464,"label":35}
,{"id":36,"x":-123.6068,"y":-381.1748,"label":36}
,{"id":37,"x":-74.9525,"y":-393.6918,"label":37}
,{"id":38,"x":-25.1162,"y":-400,"label":38}
,{"id":39,"x":25.1162,"y":-400,"label":39}
,{"id":40,"x":74.9525,"y":-393.6918,"label":40}
,{"id":41,"x":123.6068,"y":-381.1748,"label":41}
,{"id":42,"x":170.3117,"y":-362.6464,"label":42}
,{"id":43,"x":214.3307,"y":-338.3989,"label":43}
,{"id":44,"x":254.9696,"y":-308.8147,"label":44}
,{"id":45,"x":291.5875,"y":-274.3602,"label":45}
,{"id":46,"x":323.6068,"y":-235.579,"label":46}
,{"id":47,"x":350.5227,"y":-193.0825,"label":47}
,{"id":48,"x":371.9106,"y":-147.541,"label":48}
,{"id":49,"x":387.4333,"y":-99.6726,"label":49}
,{"id":50,"x":396.8459,"y":-50.2324,"label":50}];
// create an array with nodes
var nodes = new vis.DataSet(set);
// create an array with edges
var edges = new vis.DataSet([]);
// container element
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
// disable physics
var options = {physics: {enabled: false}};
// create network
network = new vis.Network(container, data, options);
// get original positions
var positions = network.getPositions();
var k = 0, l = 0, steps = 100;
timer = setInterval(function(){
k++;
var positions_start = network.getPositions();
var l = k / steps;
for( var id in positions){
var nodePosition = network.getPositions([id]);
var x_start = positions_start[id].x;
var y_start = positions_start[id].y;
var x_new = x_start * (1-l);
var y_new = y_start * (1-l);
if( l > 1) break;
network.moveNode(id,x_new,y_new);
}
if(k == steps) clearInterval(timer);
},17);
</script>
</body>
</html>