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.

156 lines
4.3 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Clustering</title>
  5. <script type="text/javascript" src="../../../dist/vis.js"></script>
  6. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
  7. <style type="text/css">
  8. #mynetwork {
  9. width: 600px;
  10. height: 600px;
  11. border: 1px solid lightgray;
  12. }
  13. p {
  14. max-width: 600px;
  15. }
  16. h4 {
  17. margin-bottom: 3px;
  18. }
  19. </style>
  20. <script src="../../googleAnalytics.js"></script>
  21. </head>
  22. <body>
  23. <p>
  24. You can zoom in and out to cluster/decluster.
  25. </p>
  26. Stabilize when clustering:<input type="checkbox" id="stabilizeCheckbox">
  27. <div id="mynetwork"></div>
  28. <script type="text/javascript">
  29. var clusterIndex = 0;
  30. var clusters = [];
  31. var lastClusterZoomLevel = 0;
  32. var clusterFactor = 0.9;
  33. // create an array with nodes
  34. var nodes = [
  35. {id: 1, label: 'Node 1'},
  36. {id: 2, label: 'Node 2'},
  37. {id: 3, label: 'Node 3'},
  38. {id: 4, label: 'Node 4'},
  39. {id: 5, label: 'Node 5'},
  40. {id: 6, label: 'Node 6'},
  41. {id: 7, label: 'Node 7'},
  42. {id: 8, label: 'Node 8'},
  43. {id: 9, label: 'Node 9'},
  44. {id: 10, label: 'Node 10'}
  45. ];
  46. // create an array with edges
  47. var edges = [
  48. {from: 1, to: 2},
  49. {from: 1, to: 3},
  50. {from: 10, to: 4},
  51. {from: 2, to: 5},
  52. {from: 6, to: 2},
  53. {from: 7, to: 5},
  54. {from: 8, to: 6},
  55. {from: 9, to: 7},
  56. {from: 10, to: 9}
  57. ];
  58. // create a network
  59. var container = document.getElementById('mynetwork');
  60. var data = {
  61. nodes: nodes,
  62. edges: edges
  63. };
  64. var options = {layout: {randomSeed: 8}};
  65. var network = new vis.Network(container, data, options);
  66. // set the first initial zoom level
  67. network.once('initRedraw', function() {
  68. if (lastClusterZoomLevel === 0) {
  69. lastClusterZoomLevel = network.getScale();
  70. }
  71. });
  72. // we use the zoom event for our clustering
  73. network.on('zoom', function (params) {
  74. if (params.direction == '-') {
  75. if (params.scale < lastClusterZoomLevel*clusterFactor) {
  76. makeClusters(params.scale);
  77. lastClusterZoomLevel = params.scale;
  78. }
  79. }
  80. else {
  81. openClusters(params.scale);
  82. }
  83. });
  84. // if we click on a node, we want to open it up!
  85. network.on("selectNode", function (params) {
  86. if (params.nodes.length == 1) {
  87. if (network.isCluster(params.nodes[0]) == true) {
  88. network.openCluster(params.nodes[0])
  89. }
  90. }
  91. });
  92. // make the clusters
  93. function makeClusters(scale) {
  94. var clusterOptionsByData = {
  95. processProperties: function (clusterOptions, childNodes) {
  96. clusterIndex = clusterIndex + 1;
  97. var childrenCount = 0;
  98. for (var i = 0; i < childNodes.length; i++) {
  99. childrenCount += childNodes[i].childrenCount || 1;
  100. }
  101. clusterOptions.childrenCount = childrenCount;
  102. clusterOptions.label = "# " + childrenCount + "";
  103. clusterOptions.font = {size: childrenCount*5+30}
  104. clusterOptions.id = 'cluster:' + clusterIndex;
  105. clusters.push({id:'cluster:' + clusterIndex, scale:scale});
  106. return clusterOptions;
  107. },
  108. clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}}
  109. }
  110. network.clusterOutliers(clusterOptionsByData);
  111. if (document.getElementById('stabilizeCheckbox').checked === true) {
  112. network.stabilize();
  113. }
  114. }
  115. // open them back up!
  116. function openClusters(scale) {
  117. var newClusters = [];
  118. var declustered = false;
  119. for (var i = 0; i < clusters.length; i++) {
  120. if (clusters[i].scale < scale) {
  121. network.openCluster(clusters[i].id);
  122. lastClusterZoomLevel = scale;
  123. declustered = true;
  124. }
  125. else {
  126. newClusters.push(clusters[i])
  127. }
  128. }
  129. clusters = newClusters;
  130. if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
  131. network.stabilize();
  132. }
  133. }
  134. </script>
  135. </body>
  136. </html>