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.

167 lines
4.8 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="../exampleUtil.js"></script>
  54. <script type="text/javascript" src="../../../dist/vis.js"></script>
  55. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  56. <script type="text/javascript">
  57. var nodes = null;
  58. var edges = null;
  59. var network = null;
  60. // randomly create some nodes and edges
  61. var data = getScaleFreeNetwork(25);
  62. var seed = 2;
  63. function destroy() {
  64. if (network !== null) {
  65. network.destroy();
  66. network = null;
  67. }
  68. }
  69. function draw() {
  70. destroy();
  71. nodes = [];
  72. edges = [];
  73. // create a network
  74. var container = document.getElementById('mynetwork');
  75. var options = {
  76. layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
  77. locale: document.getElementById('locale').value,
  78. manipulation: {
  79. addNode: function (data, callback) {
  80. // filling in the popup DOM elements
  81. document.getElementById('operation').innerHTML = "Add Node";
  82. document.getElementById('node-id').value = data.id;
  83. document.getElementById('node-label').value = data.label;
  84. document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
  85. document.getElementById('cancelButton').onclick = clearPopUp.bind();
  86. document.getElementById('network-popUp').style.display = 'block';
  87. },
  88. editNode: function (data, callback) {
  89. // filling in the popup DOM elements
  90. document.getElementById('operation').innerHTML = "Edit Node";
  91. document.getElementById('node-id').value = data.id;
  92. document.getElementById('node-label').value = data.label;
  93. document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
  94. document.getElementById('cancelButton').onclick = clearPopUp.bind();
  95. document.getElementById('network-popUp').style.display = 'block';
  96. },
  97. addEdge: function (data, callback) {
  98. if (data.from == data.to) {
  99. var r = confirm("Do you want to connect the node to itself?");
  100. if (r == true) {
  101. callback(data);
  102. }
  103. }
  104. else {
  105. callback(data);
  106. }
  107. }
  108. }
  109. };
  110. network = new vis.Network(container, data, options);
  111. }
  112. function clearPopUp() {
  113. document.getElementById('saveButton').onclick = null;
  114. document.getElementById('cancelButton').onclick = null;
  115. document.getElementById('network-popUp').style.display = 'none';
  116. }
  117. function saveData(data,callback) {
  118. data.id = document.getElementById('node-id').value;
  119. data.label = document.getElementById('node-label').value;
  120. clearPopUp();
  121. callback(data);
  122. }
  123. </script>
  124. <script src="../../googleAnalytics.js"></script>
  125. </head>
  126. <body onload="draw();">
  127. <h2>Editing the nodes and edges (localized)</h2>
  128. <p style="width: 700px; font-size:14px; text-align: justify;">
  129. The localization is only relevant to the manipulation buttons.
  130. </p>
  131. <p>
  132. <label for="locale">Select a locale:</label>
  133. <select id="locale" onchange="draw();">
  134. <option value="en" selected>en</option>
  135. <option value="nl">nl</option>
  136. </select>
  137. </p>
  138. <div id="network-popUp">
  139. <span id="operation">node</span> <br>
  140. <table style="margin:auto;"><tr>
  141. <td>id</td><td><input id="node-id" value="new value" /></td>
  142. </tr>
  143. <tr>
  144. <td>label</td><td><input id="node-label" value="new value" /></td>
  145. </tr></table>
  146. <input type="button" value="save" id="saveButton" />
  147. <input type="button" value="cancel" id="cancelButton" />
  148. </div>
  149. <br />
  150. <div id="mynetwork"></div>
  151. </body>
  152. </html>