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.

231 lines
6.5 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Localization</title>
  5. <style type="text/css">
  6. body, select {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. position:relative;
  11. width: 800px;
  12. height: 600px;
  13. border: 1px solid lightgray;
  14. }
  15. table.legend_table {
  16. font-size: 11px;
  17. border-width:1px;
  18. border-color:#d3d3d3;
  19. border-style:solid;
  20. }
  21. table.legend_table,td {
  22. border-width:1px;
  23. border-color:#d3d3d3;
  24. border-style:solid;
  25. padding: 2px;
  26. }
  27. div.table_content {
  28. width:80px;
  29. text-align:center;
  30. }
  31. div.table_description {
  32. width:100px;
  33. }
  34. #operation {
  35. font-size:28px;
  36. }
  37. #network-popUp {
  38. display:none;
  39. position:absolute;
  40. top:350px;
  41. left:170px;
  42. z-index:299;
  43. width:250px;
  44. height:120px;
  45. background-color: #f9f9f9;
  46. border-style:solid;
  47. border-width:3px;
  48. border-color: #5394ed;
  49. padding:10px;
  50. text-align: center;
  51. }
  52. </style>
  53. <script type="text/javascript" src="../../dist/vis.js"></script>
  54. <link type="text/css" rel="stylesheet" href="../../dist/vis.css">
  55. <script type="text/javascript">
  56. var nodes = null;
  57. var edges = null;
  58. var network = null;
  59. function draw() {
  60. nodes = [];
  61. edges = [];
  62. var connectionCount = [];
  63. // randomly create some nodes and edges
  64. var nodeCount = 25;
  65. for (var i = 0; i < nodeCount; i++) {
  66. nodes.push({
  67. id: i,
  68. label: String(i)
  69. });
  70. connectionCount[i] = 0;
  71. // create edges in a scale-free-network way
  72. if (i == 1) {
  73. var from = i;
  74. var to = 0;
  75. edges.push({
  76. from: from,
  77. to: to
  78. });
  79. connectionCount[from]++;
  80. connectionCount[to]++;
  81. }
  82. else if (i > 1) {
  83. var conn = edges.length * 2;
  84. var rand = Math.floor(Math.random() * conn);
  85. var cum = 0;
  86. var j = 0;
  87. while (j < connectionCount.length && cum < rand) {
  88. cum += connectionCount[j];
  89. j++;
  90. }
  91. var from = i;
  92. var to = j;
  93. edges.push({
  94. from: from,
  95. to: to
  96. });
  97. connectionCount[from]++;
  98. connectionCount[to]++;
  99. }
  100. }
  101. // create a network
  102. var container = document.getElementById('mynetwork');
  103. var data = {
  104. nodes: nodes,
  105. edges: edges
  106. };
  107. var options = {
  108. stabilize: false,
  109. dataManipulation: true,
  110. onAdd: function(data,callback) {
  111. var span = document.getElementById('operation');
  112. var idInput = document.getElementById('node-id');
  113. var labelInput = document.getElementById('node-label');
  114. var saveButton = document.getElementById('saveButton');
  115. var cancelButton = document.getElementById('cancelButton');
  116. var div = document.getElementById('network-popUp');
  117. span.innerHTML = "Add Node";
  118. idInput.value = data.id;
  119. labelInput.value = data.label;
  120. saveButton.onclick = saveData.bind(this,data,callback);
  121. cancelButton.onclick = clearPopUp.bind();
  122. div.style.display = 'block';
  123. },
  124. onEdit: function(data,callback) {
  125. var span = document.getElementById('operation');
  126. var idInput = document.getElementById('node-id');
  127. var labelInput = document.getElementById('node-label');
  128. var saveButton = document.getElementById('saveButton');
  129. var cancelButton = document.getElementById('cancelButton');
  130. var div = document.getElementById('network-popUp');
  131. span.innerHTML = "Edit Node";
  132. idInput.value = data.id;
  133. labelInput.value = data.label;
  134. saveButton.onclick = saveData.bind(this,data,callback);
  135. cancelButton.onclick = clearPopUp.bind();
  136. div.style.display = 'block';
  137. },
  138. onConnect: function(data,callback) {
  139. if (data.from == data.to) {
  140. var r=confirm("Do you want to connect the node to itself?");
  141. if (r==true) {
  142. callback(data);
  143. }
  144. }
  145. else {
  146. callback(data);
  147. }
  148. }
  149. };
  150. network = new vis.Network(container, data, options);
  151. // add event listeners
  152. network.on('select', function(params) {
  153. document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
  154. });
  155. network.on("resize", function(params) {console.log(params.width,params.height)});
  156. function clearPopUp() {
  157. var saveButton = document.getElementById('saveButton');
  158. var cancelButton = document.getElementById('cancelButton');
  159. saveButton.onclick = null;
  160. cancelButton.onclick = null;
  161. var div = document.getElementById('network-popUp');
  162. div.style.display = 'none';
  163. }
  164. function saveData(data,callback) {
  165. var idInput = document.getElementById('node-id');
  166. var labelInput = document.getElementById('node-label');
  167. var div = document.getElementById('network-popUp');
  168. data.id = idInput.value;
  169. data.label = labelInput.value;
  170. clearPopUp();
  171. callback(data);
  172. }
  173. // update the locale when changing the select box value
  174. var select = document.getElementById('locale');
  175. select.onchange = function () {
  176. network.setOptions({
  177. locale: this.value
  178. });
  179. };
  180. select.onchange();
  181. }
  182. </script>
  183. </head>
  184. <body onload="draw();">
  185. <h2>Editing the dataset (localized)</h2>
  186. <p style="width: 700px; font-size:14px; text-align: justify;">
  187. This is the same example as <a href="21_data_manipulation.html">21_data_manipulation.html</a>, except that there is a select box added which allows to switch locale. The localization is only relevant to the manipulation buttons.
  188. </p>
  189. <p>
  190. <label for="locale">Select a locale:</label>
  191. <select id="locale">
  192. <option value="en" selected>en</option>
  193. <option value="nl">nl</option>
  194. </select>
  195. </p>
  196. <div id="network-popUp">
  197. <span id="operation">node</span> <br>
  198. <table style="margin:auto;"><tr>
  199. <td>id</td><td><input id="node-id" value="new value"></td>
  200. </tr>
  201. <tr>
  202. <td>label</td><td><input id="node-label" value="new value"> </td>
  203. </tr></table>
  204. <input type="button" value="save" id="saveButton"></button>
  205. <input type="button" value="cancel" id="cancelButton"></button>
  206. </div>
  207. <br />
  208. <div id="mynetwork"></div>
  209. <p id="selection"></p>
  210. </body>
  211. </html>