-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (90 loc) · 2.64 KB
/
index.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
<!doctype html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Network | Static smooth curves - World Cup Network</title>
<script type="text/javascript" src="vis.js"></script>
<link type="text/css" rel="stylesheet" href="vis-network.min.css">
<script src="WorldCup2014new.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
#optionsContainer {
height:280px;
}
</style>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
The static smooth curves are based only on the positions of the connected
nodes.
There are multiple ways to determine the way this curve is drawn.
This example shows the effect of the different types on a large network.
<br/> <br/>
Also shown in this example is the inheritColor option of the edges as well as
the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
</div>
<div id="optionsContainer"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
function redrawAll() {
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
color:{inherit:true},
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
hideEdgesOnDrag: true,
tooltipDelay: 200
},
configure: {
filter: function (option, path) {
if (option === 'inherit') {return true;}
if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
if (option === 'roundness') {return true;}
if (option === 'hideEdgesOnDrag') {return true;}
if (option === 'hideNodesOnDrag') {return true;}
return false;
},
container: document.getElementById('optionsContainer'),
showButton: false
},
// physics: false
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -80000,
springConstant: 0.001,
springLength: 200
}
}
};
var data = {nodes:nodes, edges:edges};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
redrawAll()
</script>
</body>
</html>