UNPKG

4.22 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Network | Dynamic Data</title>
5
6 <script type="text/javascript" src="../../../dist/vis-network.min.js"></script>
7 <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
8
9 <style type="text/css">
10 #mynetwork {
11 width: 600px;
12 height: 400px;
13 border: 1px solid lightgray;
14 }
15
16 p {
17 max-width:600px;
18 }
19
20 h4 {
21 margin-bottom:3px;
22 }
23 </style>
24</head>
25
26<p>
27 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.
28</p>
29
30<h4>DataSet (change the data while it's loaded and initialzed):</h4>
31<input type="button" onclick="addNode()" value="add node dynamically"> <br />
32<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
33<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
34<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
35<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
36
37<h4>setOptions (change the global options):</h4>
38<input type="button" onclick="changeOptions()" value="change the global options"><br />
39
40<h4>setData (reinitialize the data): </h4>
41<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
42
43<h4>Cleanly destroy the network and restart it:</h4>
44<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
45<div id="mynetwork"></div>
46
47<script type="text/javascript">
48 var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
49
50 function startNetwork() {
51 // this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
52 nodeIds = [2, 3, 4, 5];
53 shadowState = false;
54
55
56 // create an array with nodes
57 nodesArray = [
58 {id: 1, label: 'Node 1'},
59 {id: 2, label: 'Node 2'},
60 {id: 3, label: 'Node 3'},
61 {id: 4, label: 'Node 4'},
62 {id: 5, label: 'Node 5'}
63 ];
64 nodes = new vis.DataSet(nodesArray);
65
66 // create an array with edges
67 edgesArray = [
68 {from: 1, to: 3},
69 {from: 1, to: 2},
70 {from: 2, to: 4},
71 {from: 2, to: 5}
72 ];
73 edges = new vis.DataSet(edgesArray);
74
75 // create a network
76 var container = document.getElementById('mynetwork');
77 var data = {
78 nodes: nodes,
79 edges: edges
80 };
81 var options = {};
82 network = new vis.Network(container, data, options);
83 }
84
85 function addNode() {
86 var newId = (Math.random() * 1e7).toString(32);
87 nodes.add({id:newId, label:"I'm new!"});
88 nodeIds.push(newId);
89 }
90
91 function changeNode1() {
92 var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
93 nodes.update([{id:1, color:{background:newColor}}]);
94 }
95
96 function removeRandomNode() {
97 var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
98 nodes.remove({id:randomNodeId});
99
100 var index = nodeIds.indexOf(randomNodeId);
101 nodeIds.splice(index,1);
102 }
103
104 function changeOptions() {
105 shadowState = !shadowState;
106 network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
107 }
108
109 function resetAllNodes() {
110 nodes.clear();
111 edges.clear();
112 nodes.add(nodesArray);
113 edges.add(edgesArray);
114 }
115
116 function resetAllNodesStabilize() {
117 resetAllNodes();
118 network.stabilize();
119 }
120
121 function setTheData() {
122 nodes = new vis.DataSet(nodesArray);
123 edges = new vis.DataSet(edgesArray);
124 network.setData({nodes:nodes, edges:edges})
125 }
126
127 function resetAll() {
128 if (network !== null) {
129 network.destroy();
130 network = null;
131 }
132 startNetwork();
133 }
134
135 startNetwork();
136</script>
137
138
139</body>
140</html>