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
136
137
138
139
140
|
<!doctype html>
<html>
<head>
<title>Network | Dynamic Data</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
h4 {
margin-bottom:3px;
}
</style>
</head>
<p>
You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
</p>
<h4>DataSet (change the data while it's loaded and initialzed):</h4>
<input type="button" onclick="addNode()" value="add node dynamically"> <br />
<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
<h4>setOptions (change the global options):</h4>
<input type="button" onclick="changeOptions()" value="change the global options"><br />
<h4>setData (reinitialize the data): </h4>
<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
<h4>Cleanly destroy the network and restart it:</h4>
<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
<div id="mynetwork"></div>
<script type="text/javascript">
var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
function startNetwork() {
// this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
nodeIds = [2, 3, 4, 5];
shadowState = false;
// create an array with nodes
nodesArray = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
nodes = new vis.DataSet(nodesArray);
// create an array with edges
edgesArray = [
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
];
edges = new vis.DataSet(edgesArray);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
function addNode() {
var newId = (Math.random() * 1e7).toString(32);
nodes.add({id:newId, label:"I'm new!"});
nodeIds.push(newId);
}
function changeNode1() {
var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
nodes.update([{id:1, color:{background:newColor}}]);
}
function removeRandomNode() {
var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
nodes.remove({id:randomNodeId});
var index = nodeIds.indexOf(randomNodeId);
nodeIds.splice(index,1);
}
function changeOptions() {
shadowState = !shadowState;
network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
}
function resetAllNodes() {
nodes.clear();
edges.clear();
nodes.add(nodesArray);
edges.add(edgesArray);
}
function resetAllNodesStabilize() {
resetAllNodes();
network.stabilize();
}
function setTheData() {
nodes = new vis.DataSet(nodesArray);
edges = new vis.DataSet(edgesArray);
network.setData({nodes:nodes, edges:edges})
}
function resetAll() {
if (network !== null) {
network.destroy();
network = null;
}
startNetwork();
}
startNetwork();
</script>
<script src="../../googleAnalytics.js"></script>
</body>
</html>
|
