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.

278 lines
11 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 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 = 50;
  159. var optionsThreshold = 0.8;
  160. var optionGlobalCount = 0;
  161. function checkOptions() {
  162. optionGlobalCount++;
  163. if (optionGlobalCount == amountOfOptionChecks) {
  164. checkMethods();
  165. }
  166. else {
  167. var allOptions = vis.network.allOptions.allOptions;
  168. var testOptions = {};
  169. constructOptions(allOptions, testOptions);
  170. if (testOptions.physics === undefined) {testOptions.physics = {};}
  171. if (testOptions.layout === undefined) {testOptions.layout = {};}
  172. testOptions.physics.enabled = true;
  173. testOptions.layout.improvedLayout = false;
  174. var failed = setTimeout(function () {
  175. console.error("FAILED", JSON.stringify(testOptions, null, 4))
  176. }, 500);
  177. var counter = 0;
  178. drawQuick();
  179. network.on("afterDrawing", function () {
  180. counter++;
  181. if (counter > 2) {
  182. counter = 0;
  183. network.off('afterDrawing');
  184. clearTimeout(failed);
  185. network.destroy();
  186. }
  187. })
  188. network.on("stabilized", function () {
  189. clearTimeout(failed);
  190. network.destroy();
  191. });
  192. network.once("destroy", function () {
  193. clearTimeout(failed);
  194. setTimeout(checkOptions, 100);
  195. })
  196. console.log("now testing:",testOptions)
  197. network.setOptions(testOptions);
  198. }
  199. }
  200. function constructOptions(allOptions, testOptions) {
  201. for (var option in allOptions) {
  202. if (Math.random() < optionsThreshold) {
  203. if (option !== "__type__" && option !== '__any__' && option !== 'locales' && option !== 'image' && option !== 'id') {
  204. if (allOptions[option].__type__ !== undefined) {
  205. if (testOptions[option] === undefined) {
  206. testOptions[option] = {};
  207. }
  208. constructOptions(allOptions[option], testOptions[option])
  209. if (Object.keys(testOptions).length === 0) {
  210. testOptions[option] = undefined;
  211. delete testOptions[option];
  212. }
  213. }
  214. else {
  215. if (allOptions[option].boolean !== undefined) {
  216. if (testOptions[option] === undefined) {
  217. testOptions[option] = {};
  218. }
  219. testOptions[option] = Math.random() < 0.5;
  220. }
  221. else if(allOptions[option].number !== undefined) {
  222. if (testOptions[option] === undefined) {
  223. testOptions[option] = {};
  224. }
  225. testOptions[option] = 1 * Math.random();
  226. }
  227. else if(allOptions[option].string !== undefined && Array.isArray(allOptions[option].string)) {
  228. var value = allOptions[option].string[Math.floor(Math.random() * allOptions[option].string.length)];
  229. if (value !== 'image' && value !== 'circularImage' && value !== 'icon') {
  230. if (testOptions[option] === undefined) {
  231. testOptions[option] = {};
  232. }
  233. testOptions[option] = value;
  234. }
  235. }
  236. else if(allOptions[option].string !== undefined) {
  237. // if (testOptions[option] === undefined) {
  238. // testOptions[option] = {};
  239. // }
  240. // testOptions[option] = "hello world";
  241. }
  242. }
  243. }
  244. }
  245. }
  246. }
  247. checkOptions();
  248. // for (var i = 0; i < amountOfOptionChecks; i++) {
  249. // setTimeout(checkOptions.bind(this,i), i*optionCheckTime);
  250. // }
  251. // setTimeout(checkMethods, amountOfOptionChecks*optionCheckTime);
  252. </script>
  253. </body>
  254. </html>