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.

182 lines
5.1 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | Navigation</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mygraph {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. table.legend_table {
  15. font-size: 11px;
  16. border-width:1px;
  17. border-color:#d3d3d3;
  18. border-style:solid;
  19. }
  20. table.legend_table,td {
  21. border-width:1px;
  22. border-color:#d3d3d3;
  23. border-style:solid;
  24. padding: 2px;
  25. }
  26. div.table_content {
  27. width:80px;
  28. text-align:center;
  29. }
  30. div.table_description {
  31. width:100px;
  32. }
  33. </style>
  34. <script type="text/javascript" src="../../dist/vis.js"></script>
  35. <script type="text/javascript">
  36. var nodes = null;
  37. var edges = null;
  38. var graph = null;
  39. function draw() {
  40. nodes = [];
  41. edges = [];
  42. var connectionCount = [];
  43. // randomly create some nodes and edges
  44. var nodeCount = document.getElementById('nodeCount').value;
  45. for (var i = 0; i < nodeCount; i++) {
  46. nodes.push({
  47. id: i,
  48. label: String(i)
  49. });
  50. connectionCount[i] = 0;
  51. // create edges in a scale-free-graph way
  52. if (i == 1) {
  53. var from = i;
  54. var to = 0;
  55. edges.push({
  56. from: from,
  57. to: to
  58. });
  59. connectionCount[from]++;
  60. connectionCount[to]++;
  61. }
  62. else if (i > 1) {
  63. var conn = edges.length * 2;
  64. var rand = Math.floor(Math.random() * conn);
  65. var cum = 0;
  66. var j = 0;
  67. while (j < connectionCount.length && cum < rand) {
  68. cum += connectionCount[j];
  69. j++;
  70. }
  71. var from = i;
  72. var to = j;
  73. edges.push({
  74. from: from,
  75. to: to
  76. });
  77. connectionCount[from]++;
  78. connectionCount[to]++;
  79. }
  80. }
  81. // create a graph
  82. var container = document.getElementById('mygraph');
  83. var data = {
  84. nodes: nodes,
  85. edges: edges
  86. };
  87. /*
  88. var options = {
  89. nodes: {
  90. shape: 'circle'
  91. },
  92. edges: {
  93. length: 50
  94. },
  95. stabilize: false
  96. };
  97. */
  98. var options = {
  99. edges: {
  100. length: 50
  101. },
  102. stabilize: false,
  103. navigation: true,
  104. keyboard: true
  105. };
  106. graph = new vis.Graph(container, data, options);
  107. // add event listeners
  108. vis.events.addListener(graph, 'select', function(params) {
  109. document.getElementById('selection').innerHTML =
  110. 'Selection: ' + graph.getSelection();
  111. });
  112. }
  113. </script>
  114. </head>
  115. <body onload="draw();">
  116. <h2>Navigation controls and keyboad navigation</h2>
  117. <div style="width: 700px; font-size:14px;">
  118. This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls are described below. <br /><br />
  119. <table class="legend_table">
  120. <tr>
  121. <td>Icons: </td>
  122. <td><div class="table_content"><img src="img/UI_icons/uparrow.png" /> </div></td>
  123. <td><div class="table_content"><img src="img/UI_icons/downarrow.png" /> </div></td>
  124. <td><div class="table_content"><img src="img/UI_icons/leftarrow.png" /> </div></td>
  125. <td><div class="table_content"><img src="img/UI_icons/rightarrow.png" /> </div></td>
  126. <td><div class="table_content"><img src="img/UI_icons/plus.png" /> </div></td>
  127. <td><div class="table_content"><img src="img/UI_icons/minus.png" /> </div></td>
  128. <td><div class="table_content"><img src="img/UI_icons/zoomExtends.png" /> </div></td>
  129. </tr>
  130. <tr>
  131. <td><div class="table_description">Keyboard shortcuts:</div></td>
  132. <td><div class="table_content">Up arrow</div></td>
  133. <td><div class="table_content">Down arrow</div></td>
  134. <td><div class="table_content">Left arrow</div></td>
  135. <td><div class="table_content">Right arrow</div></td>
  136. <td><div class="table_content">=<br />[<br />Page up</div></td>
  137. <td><div class="table_content">-<br />]<br />Page down</div></td>
  138. <td><div class="table_content">None</div></td>
  139. </tr>
  140. <tr>
  141. <td><div class="table_description">Description:</div></td>
  142. <td><div class="table_content">Move up</div></td>
  143. <td><div class="table_content">Move down</div></td>
  144. <td><div class="table_content">Move left</div></td>
  145. <td><div class="table_content">Move right</div></td>
  146. <td><div class="table_content">Zoom in</div></td>
  147. <td><div class="table_content">Zoom out</div></td>
  148. <td><div class="table_content">Zoom extends</div></td>
  149. </tr>
  150. </table>
  151. <br />
  152. Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
  153. Zoom Extends changes the zoom and position of the camera to encompass all visible nodes.
  154. </div>
  155. <br />
  156. <form onsubmit="draw(); return false;">
  157. <label for="nodeCount">Number of nodes:</label>
  158. <input id="nodeCount" type="text" value="25" style="width: 50px;">
  159. <input type="submit" value="Go">
  160. </form>
  161. <br>
  162. <div id="mygraph"></div>
  163. <p id="selection"></p>
  164. </body>
  165. </html>