|
|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS Bin</title>
- <script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework -->
- <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
- <style type="text/css">
- #network{
- width: 1900px;
- height: 800px;
- border: 1px solid lightgray;
- }
- </style>
- </head>
- <body>
- <h1>Network Test</h1>
- <input type="button" value='enable physics!!!' onclick="enablephysics()">
- <input type="button" value='clickme!!!' onclick="fireCallback()">
- <input type="button" value='fire all missles!!!' onclick="fireall(10)">
- <input type="button" value='fire all missles SLOWLY!!!' onclick="fireall(500)">
- <input type="button" value='fire T1 class missles!!!' onclick="fireT1()">
- <div id="network"></div>
- <script>
-
- function enablephysics() {
- network.setOptions({physics:true})
- }
- function fireT1() {
- if (callbackIndex < CALLBACKS.length -1) {
- console.log("CALLING:",callbackIndex);
- CALLBACKS[callbackIndex]();
- callbackIndex++;
- if (callbackIndex == 195)
- return;
- setTimeout(fireT1,0);
- }
- }
-
- function fireall(time) {
- if (callbackIndex < CALLBACKS.length -1) {
- console.log("CALLING:",callbackIndex)
- CALLBACKS[callbackIndex]();
- callbackIndex++;
- setTimeout(function () {fireall(time);},time);
- }
- }
- function fireCallback() {
- if (callbackIndex < CALLBACKS.length -1) {
- console.log("CALLING:",callbackIndex)
- CALLBACKS[callbackIndex]();
- callbackIndex++;
- }
- else {
- alert("no more callbacks");
- }
-
- }
-
- var callbackIndex = 0;
- var CALLBACKS = [];
- var nodes = null;
- var edges = null;
- var network = null;
-
- nodes = JSON.parse('[{"id":"10:98:22"},{"id":"10:98:25"},{"id":"11:28:e8"},{"id":"11:28:ea"},{"id":"11:28:f6"},{"id":"11:28:fa"},{"id":"11:28:fd"},{"id":"11:29:01"},{"id":"11:29:05"},{"id":"11:29:07"},{"id":"11:29:11"},{"id":"11:29:14"},{"id":"11:29:15"},{"id":"11:29:1b"},{"id":"11:29:1c"},{"id":"11:29:1f"},{"id":"11:29:20"},{"id":"11:a0:bf"},{"id":"11:a0:c0"},{"id":"11:a0:c1"},{"id":"11:a0:c3"},{"id":"11:a0:c4"},{"id":"11:a0:c5"},{"id":"11:a0:c6"},{"id":"11:a0:c7"},{"id":"11:a0:c8"},{"id":"11:a0:c9"},{"id":"11:a0:cb"},{"id":"11:a0:cc"},{"id":"11:a0:ce"},{"id":"11:a0:d0"},{"id":"11:a0:d1"},{"id":"11:a0:d2"},{"id":"11:a0:d3"},{"id":"11:a0:d4"},{"id":"11:a0:d6"},{"id":"11:a0:d7"},{"id":"11:a0:d8"},{"id":"11:a0:d9"},{"id":"11:a0:da"},{"id":"11:a0:db"},{"id":"11:a0:dc"},{"id":"11:a0:dd"},{"id":"11:a0:de"},{"id":"11:a0:df"},{"id":"11:a0:e1"},{"id":"11:a0:e2"},{"id":"11:a0:e4"},{"id":"11:a0:e5"},{"id":"11:a0:e6"},{"id":"11:a0:e7"},{"id":"11:a0:e9"},{"id":"11:a0:ea"},{"id":"11:a0:ed"},{"id":"11:a0:ee"},{"id":"11:a0:ef"},{"id":"11:a0:f1"},{"id":"11:a0:f2"},{"id":"11:a0:f4"},{"id":"11:a0:f5"},{"id":"11:a0:f6"},{"id":"11:a0:f7"},{"id":"11:a0:f8"},{"id":"11:a0:f9"},{"id":"11:a0:fa"},{"id":"11:a0:fb"},{"id":"11:a0:fc"},{"id":"11:a0:fd"},{"id":"11:a0:fe"},{"id":"11:a0:ff"},{"id":"11:a1:00"},{"id":"11:a1:02"},{"id":"11:a1:04"},{"id":"11:a1:07"},{"id":"11:a1:09"},{"id":"11:a1:0a"},{"id":"11:a1:0b"},{"id":"11:a1:0c"},{"id":"11:a1:0d"},{"id":"11:a1:0e"},{"id":"11:a1:0f"},{"id":"11:a1:10"},{"id":"11:a1:11"},{"id":"11:a1:13"},{"id":"11:a1:16"},{"id":"11:a1:18"},{"id":"11:a1:19"},{"id":"11:a1:1a"},{"id":"11:a1:1d"},{"id":"11:a1:1e"},{"id":"11:a1:20"},{"id":"11:a1:21"},{"id":"11:a1:23"},{"id":"11:a1:24"},{"id":"11:a1:26"},{"id":"11:a1:27"},{"id":"11:a1:29"},{"id":"11:a1:2a"},{"id":"11:a1:2c"},{"id":"11:a1:2e"},{"id":"11:a1:2f"},{"id":"11:a1:31"},{"id":"11:a1:32"},{"id":"11:a1:34"},{"id":"11:a1:35"},{"id":"11:a1:36"},{"id":"11:a1:38"},{"id":"11:a1:39"},{"id":"11:a1:3a"},{"id":"11:a1:3c"},{"id":"11:a1:3e"},{"id":"11:a1:40"},{"id":"11:a1:44"},{"id":"11:a1:45"},{"id":"11:a1:46"},{"id":"11:a1:49"},{"id":"11:a1:4b"},{"id":"11:a1:4c"},{"id":"11:a1:4d"},{"id":"11:a1:4e"},{"id":"11:a1:4f"},{"id":"11:a1:50"},{"id":"11:a1:52"},{"id":"11:a1:53"},{"id":"11:a1:56"},{"id":"11:a1:58"},{"id":"11:a1:5a"},{"id":"11:a1:5b"},{"id":"11:a1:5c"},{"id":"11:a1:5d"},{"id":"11:a1:5e"},{"id":"11:a1:5f"},{"id":"11:a1:60"},{"id":"11:a1:61"},{"id":"11:a1:62"},{"id":"11:a1:63"},{"id":"11:a1:64"},{"id":"11:a1:65"},{"id":"11:a1:67"},{"id":"11:a1:68"},{"id":"11:a1:69"},{"id":"11:a1:6a"},{"id":"11:a1:6b"},{"id":"11:a1:6c"},{"id":"11:a1:6e"},{"id":"11:a1:6f"},{"id":"11:a1:70"},{"id":"11:a1:71"},{"id":"11:a1:72"},{"id":"11:a1:73"},{"id":"11:a1:75"},{"id":"11:a1:77"},{"id":"11:a1:78"},{"id":"11:a1:79"},{"id":"11:a1:7a"},{"id":"11:a1:7b"},{"id":"11:a1:7c"},{"id":"11:a1:7d"},{"id":"11:a1:80"},{"id":"11:a1:83"},{"id":"11:a1:84"},{"id":"11:a1:85"},{"id":"11:a1:86"},{"id":"11:a1:87"},{"id":"11:a1:88"},{"id":"11:a1:8a"},{"id":"11:a1:8b"},{"id":"11:a1:8c"},{"id":"11:a1:8e"},{"id":"11:a1:8f"},{"id":"11:a1:90"},{"id":"11:a1:91"},{"id":"11:a1:92"},{"id":"11:a1:93"},{"id":"11:a1:94"},{"id":"11:a1:95"},{"id":"11:a1:96"},{"id":"11:a1:98"},{"id":"11:a1:99"},{"id":"11:a1:9a"},{"id":"11:a1:9b"},{"id":"11:a1:9e"},{"id":"11:a1:9f"},{"id":"11:a1:a0"},{"id":"11:a1:a1"},{"id":"11:a1:a2"},{"id":"11:a1:a3"},{"id":"11:a1:a4"},{"id":"11:a1:a7"},{"id":"11:a1:a9"},{"id":"11:a1:aa"},{"id":"11:a1:ab"},{"id":"11:a1:ac"},{"id":"11:a1:ad"},{"id":"11:a1:ae"},{"id":"11:a1:af"},{"id":"11:a1:b1"},{"id":"11:a1:b3"},{"id":"11:a1:b7"},{"id":"11:a1:b8"},{"id":"11:a1:b9"},{"id":"11:a1:ba"},{"id":"11:a1:bb"},{"id":"11:a1:bc"},{"id":"11:a1:bd"},{"id":"11:a1:be"},{"id":"11:a1:bf"},{"id":"11:a1:c0"},{"id":"11:a1:c1"},{"id":"11:a1:c3"},{"id":"11:a1:c4"},{"id":"11:a1:c5"},{"id":"11:a1:c6"},{"id":"11:a1:c7"},{"id":"11:a1:c9"},{"id":"11:a1:ca"},{"id":"11:a1:cb"},{"id":"11:a1:cd"},{"id":"11:a1:ce"},{"id":"11:a1:cf"},{"id":"11:a1:d1"},{"id":"11:a1:d2"},{"id":"11:a1:d3"},{"id":"11:a1:d4"},{"id":"11:a1:d6"},{"id":"11:a1:d7"},{"
-
- var edges = JSON.parse('[{"from":"26:82:72","to":"10:98:22"},{"from":"26:82:72","to":"10:98:25"},{"from":"11:a2:52","to":"11:28:e8"},{"from":"11:a2:ab","to":"11:28:ea"},{"from":"11:a2:b9","to":"11:28:f6"},{"from":"11:a3:2b","to":"11:28:fa"},{"from":"11:a0:c7","to":"11:28:fd"},{"from":"11:a3:3e","to":"11:29:01"},{"from":"11:a0:e7","to":"11:29:05"},{"from":"11:a2:20","to":"11:29:07"},{"from":"11:a3:3e","to":"11:29:11"},{"from":"11:a0:d0","to":"11:29:14"},{"from":"11:a3:3e","to":"11:29:15"},{"from":"11:a2:15","to":"11:29:1b"},{"from":"11:a1:bd","to":"11:29:1c"},{"from":"11:a0:dd","to":"11:29:1f"},{"from":"11:a1:69","to":"11:29:20"},{"from":"11:a3:3e","to":"11:a0:bf"},{"from":"11:a1:0f","to":"11:a0:c0"},{"from":"11:a0:c7","to":"11:a0:c1"},{"from":"11:a0:f6","to":"11:a0:c3"},{"from":"11:a2:b9","to":"11:a0:c4"},{"from":"11:a3:4b","to":"11:a0:c5"},{"from":"11:a0:f4","to":"11:a0:c6"},{"from":"10:98:22","to":"11:a0:c7"},{"from":"11:a0:e7","to":"11:a0:c8"},{"from":"11:a0:e7","to":"11:a0:c9"},{"from":"11:a0:d7","to":"11:a0:cb"},{"from":"11:a0:d7","to":"11:a0:cc"},{"from":"11:a2:55","to":"11:a0:ce"},{"from":"10:98:25","to":"11:a0:d0"},{"from":"11:a3:2b","to":"11:a0:d1"},{"from":"11:a1:10","to":"11:a0:d2"},{"from":"11:a0:f6","to":"11:a0:d3"},{"from":"11:a0:f8","to":"11:a0:d4"},{"from":"11:a0:c7","to":"11:a0:d6"},{"from":"11:a2:6f","to":"11:a0:d7"},{"from":"11:a0:f4","to":"11:a0:d8"},{"from":"11:a0:f4","to":"11:a0:d9"},{"from":"11:a1:0f","to":"11:a0:da"},{"from":"11:a0:d6","to":"11:a0:db"},{"from":"11:a1:07","to":"11:a0:dc"},{"from":"11:a3:3e","to":"11:a0:dd"},{"from":"11:a2:51","to":"11:a0:de"},{"from":"11:a0:d7","to":"11:a0:df"},{"from":"11:a2:b1","to":"11:a0:e1"},{"from":"11:a0:ff","to":"11:a0:e2"},{"from":"11:a3:8e","to":"11:a0:e4"},{"from":"11:a1:b8","to":"11:a0:e5"},{"from":"11:a2:ab","to":"11:a0:e6"},{"from":"26:82:72","to":"11:a0:e7"},{"from":"11:a1:00","to":"11:a0:e9"},{"from":"11:a3:8e","to":"11:a0:ea"},{"from":"11:a1:69","to":"11:a0:ed"},{"from":"10:98:25","to":"11:a0:ee"},{"from":"11:a4:15","to":"11:a0:ef"},{"from":"11:a2:56","to":"11:a0:f1"},{"from":"11:a1:c9","to":"11:a0:f2"},{"from":"11:a1:16","to":"11:a0:f4"},{"from":"11:a1:6a","to":"11:a0:f5"},{"from":"11:a0:d7","to":"11:a0:f6"},{"from":"11:a2:b9","to":"11:a0:f7"},{"from":"11:a3:2b","to":"11:a0:f8"},{"from":"11:a2:b9","to":"11:a0:f9"},{"from":"11:a3:4b","to":"11:a0:fa"},{"from":"26:82:72","to":"11:a0:fb"},{"from":"11:a1:69","to":"11:a0:fc"},{"from":"11:a0:c7","to":"11:a0:fd"},{"from":"11:a2:cf","to":"11:a0:fe"},{"from":"11:a3:2b","to":"11:a0:ff"},{"from":"11:a2:b9","to":"11:a1:00"},{"from":"11:a2:33","to":"11:a1:02"},{"from":"11:a0:cb","to":"11:a1:04"},{"from":"11:a0:e7","to":"11:a1:07"},{"from":"11:a2:da","to":"11:a1:09"},{"from":"11:a0:f4","to":"11:a1:0a"},{"from":"11:a2:b9","to":"11:a1:0b"},{"from":"11:29:1f","to":"11:a1:0c"},{"from":"11:a1:00","to":"11:a1:0d"},{"from":"11:a0:c5","to":"11:a1:0e"},{"from":"11:a3:4b","to":"11:a1:0f"},{"from":"10:98:22","to":"11:a1:10"},{"from":"11:a2:b1","to":"11:a1:11"},{"from":"11:a3:2b","to":"11:a1:13"},{"from":"11:a2:da","to":"11:a1:16"},{"from":"26:82:72","to":"11:a1:18"},{"from":"11:a1:a1","to":"11:a1:19"},{"from":"11:a1:f7","to":"11:a1:1a"},{"from":"11:a2:ab","to":"11:a1:1d"},{"from":"11:a2:b1","to":"11:a1:1e"},{"from":"11:a3:2b","to":"11:a1:20"},{"from":"11:a1:86","to":"11:a1:21"},{"from":"11:a1:86","to":"11:a1:23"},{"from":"11:a1:2e","to":"11:a1:24"},{"from":"11:a2:71","to":"11:a1:26"},{"from":"11:a3:2b","to":"11:a1:27"},{"from":"10:98:22","to":"11:a1:29"},{"from":"11:a3:2b","to":"11:a1:2a"},{"from":"11:a3:3e","to":"11:a1:2c"},{"from":"10:98:22","to":"11:a1:2e"},{"from":"11:a3:3e","to":"11:a1:2f"},{"from":"10:98:22","to":"11:a1:31"},{"from":"10:98:22","to":"11:a1:32"},{"from":"11:a3:4b","to":"11:a1:34"},{"from":"11:a1:ff","to":"11:a1:35"},{"from":"11:a3:2b","to":"11:a1:36"},{"from":"11:a1:10","to":"11:a1:38"},{"from":"11:a2:b1","to":"11:a1:39"},{"from":"11:a3:2b","to":"11:a1:3a"},{"from":"11:29:05","to":"11:a1:3c"},{"from":"11:a1:bd","to":"11:a1:3e"},{"from":"11:a1:87","to":"11:a1:40"},{"from":"11:a4:15","to":"11:a1:44"
-
- var idmap = {};
- for (var i = 0; i < nodes.length; i++) {
- nodes[i].label = i;
- idmap[nodes[i].id] = i;
- nodes[i].id = i;
- }
-
- for (var i = 0; i < edges.length; i++) {
- edges[i].from = idmap[edges[i].from];
- edges[i].to = idmap[edges[i].to];
- }
-
- console.log(nodes,edges, idmap);
-
-
- // randomly create some nodes and edges
- var data = {
- nodes: nodes,
- edges: edges
- }
- // create a network
- var status = document.getElementById('status');
- var container = document.getElementById('network');
- var options = {
- layout: {
- hierarchical: {
- direction: "UD",
- sortMethod: "directed"
- }
- },
- physics: {
- enabled: false,
- stabilization:false
- }
- };
- network = new vis.Network(container, data, options);
- network.on("stabilizationProgress", function(params) {
- var prog = params.iterations/params.total;
- status.innerText = Math.round(prog*100)+'%';
- });
- network.on("stabilizationIterationsDone", function() {
- status.innerText = "stabilized";
- });
- </script>
- </body>
- </html>
|
