UNPKG

7.26 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Network | DataSet</title>
5
6 <style type="text/css">
7 html, body {
8 font: 11pt arial;
9 }
10
11 h1 {
12 font-size: 150%;
13 margin: 5px 0;
14 }
15
16 h2 {
17 font-size: 100%;
18 margin: 5px 0;
19 }
20
21 table.view {
22 width: 100%;
23 }
24
25 table td {
26 vertical-align: top;
27 }
28
29 table table {
30 background-color: #f5f5f5;
31 border: 1px solid #e5e5e5;
32 }
33
34 table table td {
35 vertical-align: middle;
36 }
37
38 input[type=text], pre {
39 border: 1px solid lightgray;
40 }
41
42 pre {
43 margin: 0;
44 padding: 5px;
45 font-size: 10pt;
46 }
47
48 #network {
49 width: 100%;
50 height: 400px;
51 border: 1px solid lightgray;
52 }
53 </style>
54
55 <script type="text/javascript" src="../../../dist/vis-network.min.js"></script>
56 <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
57
58 <script type="text/javascript">
59 var nodes, edges, network;
60
61 // convenience method to stringify a JSON object
62 function toJSON(obj) {
63 return JSON.stringify(obj, null, 4);
64 }
65
66 function addNode() {
67 try {
68 nodes.add({
69 id: document.getElementById('node-id').value,
70 label: document.getElementById('node-label').value
71 });
72 }
73 catch (err) {
74 alert(err);
75 }
76 }
77
78 function updateNode() {
79 try {
80 nodes.update({
81 id: document.getElementById('node-id').value,
82 label: document.getElementById('node-label').value
83 });
84 }
85 catch (err) {
86 alert(err);
87 }
88 }
89 function removeNode() {
90 try {
91 nodes.remove({id: document.getElementById('node-id').value});
92 }
93 catch (err) {
94 alert(err);
95 }
96 }
97
98 function addEdge() {
99 try {
100 edges.add({
101 id: document.getElementById('edge-id').value,
102 from: document.getElementById('edge-from').value,
103 to: document.getElementById('edge-to').value
104 });
105 }
106 catch (err) {
107 alert(err);
108 }
109 }
110 function updateEdge() {
111 try {
112 edges.update({
113 id: document.getElementById('edge-id').value,
114 from: document.getElementById('edge-from').value,
115 to: document.getElementById('edge-to').value
116 });
117 }
118 catch (err) {
119 alert(err);
120 }
121 }
122 function removeEdge() {
123 try {
124 edges.remove({id: document.getElementById('edge-id').value});
125 }
126 catch (err) {
127 alert(err);
128 }
129 }
130
131 function draw() {
132 // create an array with nodes
133 nodes = new vis.DataSet();
134 nodes.on('*', function () {
135 document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
136 });
137 nodes.add([
138 {id: '1', label: 'Node 1'},
139 {id: '2', label: 'Node 2'},
140 {id: '3', label: 'Node 3'},
141 {id: '4', label: 'Node 4'},
142 {id: '5', label: 'Node 5'}
143 ]);
144
145 // create an array with edges
146 edges = new vis.DataSet();
147 edges.on('*', function () {
148 document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
149 });
150 edges.add([
151 {id: '1', from: '1', to: '2'},
152 {id: '2', from: '1', to: '3'},
153 {id: '3', from: '2', to: '4'},
154 {id: '4', from: '2', to: '5'}
155 ]);
156
157 // create a network
158 var container = document.getElementById('network');
159 var data = {
160 nodes: nodes,
161 edges: edges
162 };
163 var options = {};
164 network = new vis.Network(container, data, options);
165
166 }
167
168 </script>
169
170</head>
171
172<body onload="draw();">
173
174<p>
175 This example demonstrates dynamically adding, updating and removing nodes
176 and edges using a DataSet.
177</p>
178
179<h1>Adjust</h1>
180<table>
181 <tr>
182 <td>
183 <h2>Node</h2>
184 <table>
185 <tr>
186 <td></td>
187 <td><label for="node-id">Id</label></td>
188 <td><input id="node-id" type="text" value="6"></td>
189 </tr>
190 <tr>
191 <td></td>
192 <td><label for="node-label">Label</label></td>
193 <td><input id="node-label" type="text" value="Node 6"></td>
194 </tr>
195 <tr>
196 <td></td>
197 <td>Action</td>
198 <td>
199 <button id="node-add" onclick="addNode();">Add</button>
200 <button id="node-update" onclick="updateNode();">Update</button>
201 <button id="node-remove" onclick="removeNode();">Remove</button>
202 </td>
203 </tr>
204 </table>
205 </td>
206 <td>
207 <h2>Edge</h2>
208 <table>
209 <tr>
210 <td></td>
211 <td><label for="edge-id">Id</label></td>
212 <td><input id="edge-id" type="text" value="5"></td>
213 </tr>
214 <tr>
215 <td></td>
216 <td><label for="edge-from">From</label></td>
217 <td><input id="edge-from" type="text" value="3"></td>
218 </tr>
219 <tr>
220 <td></td>
221 <td><label for="edge-to">To</label></td>
222 <td><input id="edge-to" type="text" value="4"></td>
223 </tr>
224 <tr>
225 <td></td>
226 <td>Action</td>
227 <td>
228 <button id="edge-add" onclick="addEdge();">Add</button>
229 <button id="edge-update" onclick="updateEdge();">Update</button>
230 <button id="edge-remove" onclick="removeEdge();">Remove</button>
231 </td>
232 </tr>
233 </table>
234 </td>
235 </tr>
236
237</table>
238
239<h1>View</h1>
240<table class="view">
241 <colgroup>
242 <col width="25%">
243 <col width="25%">
244 <col width="50%">
245 </colgroup>
246 <tr>
247 <td>
248 <h2>Nodes</h2>
249 <pre id="nodes"></pre>
250 </td>
251
252 <td>
253 <h2>Edges</h2>
254 <pre id="edges"></pre>
255 </td>
256
257 <td>
258 <h2>Network</h2>
259
260 <div id="network"></div>
261 </td>
262 </tr>
263</table>
264
265</body>
266</html>