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.

261 lines
9.9 KiB

9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script type="text/javascript" src="../dist/vis.js"></script>
  7. <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
  8. <style type="text/css">
  9. #mynetwork {
  10. width: 600px;
  11. height: 400px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="mynetwork"></div>
  18. <script>
  19. var network = null;
  20. // create an array with nodes
  21. var nodes = new vis.DataSet([
  22. {id: 1, label: 'Node 1', cid:1},
  23. {id: 2, label: 'Node 2', cid:1},
  24. {id: 3, label: 'Node 3'},
  25. {id: 4, label: 'Node 4'},
  26. {id: 5, label: 'Node 5'}
  27. ]);
  28. // create an array with edges
  29. var edges = new vis.DataSet([
  30. {id: 'e1', from: 1, to: 3, label: 'hi'},
  31. {from: 1, to: 2},
  32. {from: 2, to: 4},
  33. {from: 2, to: 5}
  34. ]);
  35. var data = {
  36. nodes: nodes,
  37. edges: edges
  38. };
  39. var container = document.getElementById('mynetwork');
  40. function drawQuick() {
  41. draw({physics:{stabilization:false}});
  42. }
  43. function draw(options) {
  44. try {
  45. // clean
  46. if (network !== null) {
  47. network.destroy();
  48. network = null;
  49. }
  50. network = new vis.Network(container, data, options);
  51. }
  52. catch (err) {
  53. console.log("err")
  54. }
  55. }
  56. function clusterByCid() {
  57. drawQuick();
  58. var clusterOptionsByData = {
  59. joinCondition:function(childOptions) {
  60. return childOptions.cid == 1;
  61. },
  62. clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
  63. }
  64. network.cluster(clusterOptionsByData);
  65. }
  66. function clusterByConnection() {
  67. drawQuick();
  68. network.clusterByConnection(1)
  69. }
  70. function clusterByHubsize() {
  71. drawQuick();
  72. var clusterOptionsByData = {
  73. processProperties: function(clusterOptions, childNodes) {
  74. clusterOptions.label = "[" + childNodes.length + "]";
  75. return clusterOptions;
  76. },
  77. clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
  78. }
  79. network.clusterByHubsize(undefined, clusterOptionsByData);
  80. }
  81. function checkMethods() {
  82. var methods = [
  83. {name:"setSize", arguments: [200,300]},
  84. {name:"canvasToDOM", arguments: [{x:10,y:20}]},
  85. {name:"DOMtoCanvas", arguments: [{x:10,y:20}]},
  86. {name:"findNode", arguments: [1]},
  87. {name:"isCluster", arguments: [1]},
  88. {name:"cluster", arguments: null, func: clusterByCid},
  89. {name:"findNode", arguments: [1]},
  90. {name:"isCluster", arguments: ['cidCluster']},
  91. {name:"getNodesInCluster", arguments: ['cidCluster']},
  92. {name:"openCluster", arguments: ['cidCluster']},
  93. {name:"clusterByConnection",arguments: null, func: clusterByConnection},
  94. {name:"clusterByHubsize", arguments: null, func: clusterByHubsize},
  95. {name:"clusterOutliers", arguments: null, funcFirst: drawQuick},
  96. {name:"getSeed", arguments: null, funcFirst: drawQuick},
  97. {name:"enableEditMode", arguments: null},
  98. {name:"disableEditMode", arguments: null},
  99. {name:"addNodeMode", arguments: null},
  100. {name:"disableEditMode", arguments: null},
  101. {name:"editNode", arguments: null, funcFirst: function() {network.setOptions({manipulation:{editNode:function(data,callback) {callback(data);}}})}},
  102. {name:"disableEditMode", arguments: null},
  103. {name:"addEdgeMode", arguments: null},
  104. {name:"disableEditMode", arguments: null},
  105. {name:"editEdgeMode", arguments: null},
  106. {name:"disableEditMode", arguments: null},
  107. {name:"selectNodes", arguments: [[5], true]},
  108. {name:"deleteSelected", arguments: null, funcFirst:drawQuick},
  109. {name:"disableEditMode", arguments: null},
  110. {name:"getPositions", arguments: [[1]]},
  111. {name:"storePositions", arguments: null, funcFirst:drawQuick},
  112. {name:"getBoundingBox", arguments: [1]},
  113. {name:"getConnectedNodes", arguments: [1]},
  114. {name:"getConnectedEdges", arguments: [1]},
  115. {name:"startSimulation", arguments: null},
  116. {name:"stopSimulation", arguments: null},
  117. {name:"stabilize", arguments: null},
  118. {name:"getSelection", arguments: null},
  119. {name:"getSelectedNodes", arguments: null},
  120. {name:"getSelectedEdges", arguments: null},
  121. {name:"getNodeAt", arguments: [{x:10,y:20}]},
  122. {name:"getEdgeAt", arguments: [{x:10,y:20}]},
  123. {name:"selectNodes", arguments: [[1],false]},
  124. {name:"selectEdges", arguments: [['e1']]},
  125. {name:"unselectAll", arguments: null},
  126. {name:"redraw", arguments: null},
  127. {name:"getScale", arguments: null},
  128. {name:"getViewPosition", arguments: null},
  129. {name:"fit", arguments: null},
  130. {name:"moveTo", arguments: [{position:{x:0,y:0}}]},
  131. {name:"focus", arguments: [1]},
  132. {name:"releaseNode", arguments: null},
  133. ]
  134. drawQuick();
  135. for (var i = 0; i < methods.length; i++) {
  136. setTimeout(testMethod.bind(this,methods,i), i*50);
  137. }
  138. }
  139. function testMethod(methods,i) {
  140. var methodName = methods[i].name;
  141. console.log("Currently testing:", methodName);
  142. if (methods[i].funcFirst !== undefined) {
  143. methods[i].funcFirst();
  144. }
  145. if (methods[i].func !== undefined) {
  146. methods[i].func();
  147. }
  148. else {
  149. if (methods[i].arguments === null) {
  150. network[methodName].apply(network);
  151. }
  152. else {
  153. network[methodName].apply(network, methods[i].arguments)
  154. }
  155. }
  156. }
  157. var amountOfOptionChecks = 200;
  158. var optionCheckTime = 150;
  159. var optionsThreshold = 0.8;
  160. function checkOptions(i) {
  161. // console.log('checking Options iteration:',i)
  162. var allOptions = vis.network.allOptions.allOptions;
  163. var testOptions = {};
  164. constructOptions(allOptions, testOptions);
  165. var failed = setTimeout(function() {console.error("FAILED",JSON.stringify(testOptions,null,4))}, 0.9*optionCheckTime);
  166. var counter = 0;
  167. drawQuick();
  168. network.on("afterDrawing", function() {
  169. counter++;
  170. if (counter > 2) {
  171. counter = 0;
  172. network.off('afterDrawing');
  173. clearTimeout(failed);
  174. }
  175. })
  176. network.on("stabilized", function() {
  177. clearTimeout(failed);
  178. });
  179. network.on("destroy", function() {
  180. clearTimeout(failed);
  181. })
  182. network.setOptions(testOptions);
  183. }
  184. function constructOptions(allOptions, testOptions) {
  185. for (var option in allOptions) {
  186. if (Math.random() < optionsThreshold) {
  187. if (option !== "__type__" && option !== '__any__' && option !== 'locales' && option !== 'image' && option !== 'id') {
  188. if (allOptions[option].__type__ !== undefined) {
  189. if (testOptions[option] === undefined) {
  190. testOptions[option] = {};
  191. }
  192. constructOptions(allOptions[option], testOptions[option])
  193. if (Object.keys(testOptions).length === 0) {
  194. testOptions[option] = undefined;
  195. delete testOptions[option];
  196. }
  197. }
  198. else {
  199. if (allOptions[option].boolean !== undefined) {
  200. if (testOptions[option] === undefined) {
  201. testOptions[option] = {};
  202. }
  203. testOptions[option] = Math.random() < 0.5;
  204. }
  205. else if(allOptions[option].number !== undefined) {
  206. if (testOptions[option] === undefined) {
  207. testOptions[option] = {};
  208. }
  209. testOptions[option] = 1 * Math.random();
  210. }
  211. else if(allOptions[option].string !== undefined && Array.isArray(allOptions[option].string)) {
  212. var value = allOptions[option].string[Math.floor(Math.random() * allOptions[option].string.length)];
  213. if (value !== 'image' && value !== 'circularImage' && value !== 'icon') {
  214. if (testOptions[option] === undefined) {
  215. testOptions[option] = {};
  216. }
  217. testOptions[option] = value;
  218. }
  219. }
  220. else if(allOptions[option].string !== undefined) {
  221. // if (testOptions[option] === undefined) {
  222. // testOptions[option] = {};
  223. // }
  224. // testOptions[option] = "hello world";
  225. }
  226. }
  227. }
  228. }
  229. }
  230. }
  231. for (var i = 0; i < amountOfOptionChecks; i++) {
  232. setTimeout(checkOptions.bind(this,i), i*optionCheckTime);
  233. }
  234. setTimeout(checkMethods, amountOfOptionChecks*optionCheckTime);
  235. </script>
  236. </body>
  237. </html>