|
|
- <!doctype html>
- <html>
- <head>
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mynetwork {
- width: 1600px;
- height: 900px;
- border: 1px solid lightgray;
- }
- </style>
- <script type="text/javascript" src="../dist/vis.js"></script>
- <!--<script type="text/javascript" src="http://www.visjs.org/dist/vis.js"></script>-->
- <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>-->
- <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
- </head>
- <body onload="draw();">
- <div id="status"></div>
- <div id="mynetwork"></div>
-
- <script>
- var nodes = null;
- var edges = null;
- var network = null;
- function destroy() {
- if (network !== null) {
- network.destroy();
- network = null;
- }
- }
- function draw() {
- destroy();
- // randomly create some nodes and edges
- var data = {
- nodes: JSON.parse('[{"id":"king"},{"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"}
- edges: JSON.parse('[{"from":"26:82:72","to":"king"},{"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":"king","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":"king","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":"king","to":"11:a1:29"},{"from":"11:a3:2b","to":"11:a1:2a"},{"from":"11:a3:3e","to":"11:a1:2c"},{"from":"king","to":"11:a1:2e"},{"from":"11:a3:3e","to":"11:a1:2f"},{"from":"king","to":"11:a1:31"},{"from":"king","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"},{"from":"11:a4:15","to"
- };
-
- for (var i = 0 ; i < data.nodes.length; i++) {
- data.nodes[i].label = data.nodes[i].id
- }
- // create a network
- var status = document.getElementById('status');
- var container = document.getElementById('mynetwork');
- var options = {
- layout: {
- hierarchical: {
- direction: "UD",
- sortMethod: "directed"
- }
- },
- physics: false, //{stabilization:false},
- configure:"layout, physics"
- };
- 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>
|
