- <!DOCTYPE html>
- <html>
- <head>
- <script src="../dist/vis.js"></script>
- <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
-
- <style>
- #mynetwork {
- width: 1400px;
- height: 800px;
- border: 1px solid gray;
- }
- </style>
- </head>
- <body onload="draw()">
- <script src="https://rawgit.com/Tooa/6e17f2d7b8e34ef94719/raw/a10096a6b88c992c57d032b1ed3079d7cc4b1f51/data.js"></script>
- <div id="mynetwork"></div>
- <script>
- function draw() {
- nodes = [];
- edges = [];
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
-
-
- nodes.push({id: 0, label: 'Root'});
- nodes.push({id: 1, label: 'Child 1'});
- nodes.push({id: 2, label: 'Child 2'});
- nodes.push({id: 3, label: 'Child 3'});
- nodes.push({id: 4, label: 'Child 2.1'});
- nodes.push({id: 5, label: 'Child 2.1.1'});
- nodes.push({id: 6, label: 'Child 2.1.2'});
- nodes.push({id: 7, label: 'Child 2.1.1.1'});
-
- edges.push({from: 0, to: 1});
- edges.push({from: 0, to: 2});
- edges.push({from: 0, to: 3});
- edges.push({from: 2, to: 4});
- edges.push({from: 4, to: 5});
- edges.push({from: 4, to: 6});
- edges.push({from: 5, to: 7});
-
- nodes[7].level = 0;
- nodes[6].level = 1;
- nodes[5].level = 1;
- nodes[4].level = 2;
- nodes[3].level = 3;
- nodes[2].level = 3;
- nodes[1].level = 3;
- nodes[0].level = 4;
-
- var options = {
- edges: {
- smooth: {
- type: 'cubicBezier',
- forceDirection: 'horizontal',
- roundness: 0.4
- }
- },
- layout: {
- hierarchical: {
- direction: 'LR'
- }
- }
- };
-
- network = new vis.Network(container, data, options);
- }
-
- var network, nodes, edges;
-
-
- </script>
- </body>
- </html>
|
