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.

262 lines
10 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. {name:"getOptionsFromConfigurator", arguments: null},
  134. ]
  135. drawQuick();
  136. for (var i = 0; i < methods.length; i++) {
  137. setTimeout(testMethod.bind(this,methods,i), i*50);
  138. }
  139. }
  140. function testMethod(methods,i) {
  141. var methodName = methods[i].name;
  142. console.log("Currently testing:", methodName);
  143. if (methods[i].funcFirst !== undefined) {
  144. methods[i].funcFirst();
  145. }
  146. if (methods[i].func !== undefined) {
  147. methods[i].func();
  148. }
  149. else {
  150. if (methods[i].arguments === null) {
  151. network[methodName].apply(network);
  152. }
  153. else {
  154. network[methodName].apply(network, methods[i].arguments)
  155. }
  156. }
  157. }
  158. var amountOfOptionChecks = 200;
  159. var optionCheckTime = 150;
  160. var optionsThreshold = 0.8;
  161. function checkOptions(i) {
  162. // console.log('checking Options iteration:',i)
  163. var allOptions = vis.network.allOptions.allOptions;
  164. var testOptions = {};
  165. constructOptions(allOptions, testOptions);
  166. var failed = setTimeout(function() {console.error("FAILED",JSON.stringify(testOptions,null,4))}, 0.9*optionCheckTime);
  167. var counter = 0;
  168. drawQuick();
  169. network.on("afterDrawing", function() {
  170. counter++;
  171. if (counter > 2) {
  172. counter = 0;
  173. network.off('afterDrawing');
  174. clearTimeout(failed);
  175. }
  176. })
  177. network.on("stabilized", function() {
  178. clearTimeout(failed);
  179. });
  180. network.on("destroy", function() {
  181. clearTimeout(failed);
  182. })
  183. network.setOptions(testOptions);
  184. }
  185. function constructOptions(allOptions, testOptions) {
  186. for (var option in allOptions) {
  187. if (Math.random() < optionsThreshold) {
  188. if (option !== "__type__" && option !== '__any__' && option !== 'locales' && option !== 'image' && option !== 'id') {
  189. if (allOptions[option].__type__ !== undefined) {
  190. if (testOptions[option] === undefined) {
  191. testOptions[option] = {};
  192. }
  193. constructOptions(allOptions[option], testOptions[option])
  194. if (Object.keys(testOptions).length === 0) {
  195. testOptions[option] = undefined;
  196. delete testOptions[option];
  197. }
  198. }
  199. else {
  200. if (allOptions[option].boolean !== undefined) {
  201. if (testOptions[option] === undefined) {
  202. testOptions[option] = {};
  203. }
  204. testOptions[option] = Math.random() < 0.5;
  205. }
  206. else if(allOptions[option].number !== undefined) {
  207. if (testOptions[option] === undefined) {
  208. testOptions[option] = {};
  209. }
  210. testOptions[option] = 1 * Math.random();
  211. }
  212. else if(allOptions[option].string !== undefined && Array.isArray(allOptions[option].string)) {
  213. var value = allOptions[option].string[Math.floor(Math.random() * allOptions[option].string.length)];
  214. if (value !== 'image' && value !== 'circularImage' && value !== 'icon') {
  215. if (testOptions[option] === undefined) {
  216. testOptions[option] = {};
  217. }
  218. testOptions[option] = value;
  219. }
  220. }
  221. else if(allOptions[option].string !== undefined) {
  222. // if (testOptions[option] === undefined) {
  223. // testOptions[option] = {};
  224. // }
  225. // testOptions[option] = "hello world";
  226. }
  227. }
  228. }
  229. }
  230. }
  231. }
  232. for (var i = 0; i < amountOfOptionChecks; i++) {
  233. setTimeout(checkOptions.bind(this,i), i*optionCheckTime);
  234. }
  235. setTimeout(checkMethods, amountOfOptionChecks*optionCheckTime);
  236. </script>
  237. </body>
  238. </html>