vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
3.7 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Hierarchical layout difference</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. width: 800px;
  11. height: 500px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script type="text/javascript" src="../../dist/vis.js"></script>
  16. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  17. <script type="text/javascript">
  18. var network = null;
  19. var layoutMethod = "hubsize";
  20. function destroy() {
  21. if (network !== null) {
  22. network.destroy();
  23. network = null;
  24. }
  25. }
  26. function draw() {
  27. destroy();
  28. var nodes = [];
  29. var edges = [];
  30. // randomly create some nodes and edges
  31. for (var i = 0; i < 19; i++) {
  32. nodes.push({id: i, label: String(i)});
  33. }
  34. edges.push({from: 0, to: 1});
  35. edges.push({from: 0, to: 6});
  36. edges.push({from: 0, to: 13});
  37. edges.push({from: 0, to: 11});
  38. edges.push({from: 1, to: 2});
  39. edges.push({from: 2, to: 3});
  40. edges.push({from: 2, to: 4});
  41. edges.push({from: 3, to: 5});
  42. edges.push({from: 1, to: 10});
  43. edges.push({from: 1, to: 7});
  44. edges.push({from: 2, to: 8});
  45. edges.push({from: 2, to: 9});
  46. edges.push({from: 3, to: 14});
  47. edges.push({from: 1, to: 12});
  48. edges.push({from: 16, to: 15});
  49. edges.push({from: 15, to: 17});
  50. edges.push({from: 18, to: 17});
  51. // create a network
  52. var container = document.getElementById('mynetwork');
  53. var data = {
  54. nodes: nodes,
  55. edges: edges
  56. };
  57. var options = {
  58. layout: {
  59. hierarchical: {
  60. sortMethod:layoutMethod
  61. }
  62. },
  63. edges: {arrows:{to:true}},
  64. smoothCurves:false
  65. };
  66. network = new vis.Network(container, data, options);
  67. // add event listeners
  68. network.on('select', function(params) {
  69. document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
  70. });
  71. }
  72. </script>
  73. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  74. <body onload="draw();">
  75. <h2>Hierarchical layout difference</h2>
  76. <div style="width:700px; font-size:14px; text-align: justify;">
  77. This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
  78. The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
  79. Try switching between the methods with the dropdown box below.
  80. </div>
  81. Layout method:
  82. <select id="layout">
  83. <option value="hubsize">hubsize</option>
  84. <option value="direction">direction</option>
  85. </select><br/>
  86. <br />
  87. <div id="mynetwork"></div>
  88. <p id="selection"></p>
  89. <script language="JavaScript">
  90. var dropdown = document.getElementById("layout");
  91. dropdown.onchange = function() {
  92. layoutMethod = dropdown.value;
  93. draw();
  94. }
  95. </script>
  96. </body>
  97. </html>