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.

221 lines
6.5 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Data Manipulation</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. position:relative;
  11. width: 600px;
  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. }
  174. </script>
  175. </head>
  176. <body onload="draw();">
  177. <h2>Editing the dataset</h2>
  178. <div style="width: 700px; font-size:14px; text-align: justify;">
  179. In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
  180. If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
  181. <br /><br />
  182. The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
  183. for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
  184. pop-up that allows us to edit some of the properties.
  185. </div>
  186. <br />
  187. <div id="network-popUp">
  188. <span id="operation">node</span> <br>
  189. <table style="margin:auto;"><tr>
  190. <td>id</td><td><input id="node-id" value="new value"></td>
  191. </tr>
  192. <tr>
  193. <td>label</td><td><input id="node-label" value="new value"> </td>
  194. </tr></table>
  195. <input type="button" value="save" id="saveButton"></button>
  196. <input type="button" value="cancel" id="cancelButton"></button>
  197. </div>
  198. <br />
  199. <div id="mynetwork"></div>
  200. <p id="selection"></p>
  201. </body>
  202. </html>