- <!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>
- <div id="network"></div>
- <script>
- var network = null;
-
- 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];
- edges[i].id = 'e'+i;
- }
-
- console.log(JSON.stringify(nodes), JSON.stringify(edges));
-
-
- // 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>
|