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.

135 lines
3.5 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. <div id="mynetwork"></div>
  27. <script type="text/javascript">
  28. var clusterIndex = 0;
  29. var clusters = [];
  30. var lastClusterZoomLevel = 0;
  31. var clusterFactor = 0.9;
  32. // create an array with nodes
  33. var nodes = [
  34. {id: 1, label: 'Node 1'},
  35. {id: 2, label: 'Node 2'},
  36. {id: 3, label: 'Node 3'},
  37. {id: 4, label: 'Node 4'},
  38. {id: 5, label: 'Node 5'},
  39. {id: 6, label: 'Node 6'},
  40. {id: 7, label: 'Node 7'},
  41. {id: 8, label: 'Node 8'},
  42. {id: 9, label: 'Node 9'},
  43. {id: 10, label: 'Node 10'}
  44. ];
  45. // create an array with edges
  46. var edges = [
  47. {from: 1, to: 2},
  48. {from: 1, to: 3},
  49. {from: 10, to: 4},
  50. {from: 2, to: 5},
  51. {from: 6, to: 2},
  52. {from: 7, to: 5},
  53. {from: 8, to: 6},
  54. {from: 9, to: 7},
  55. {from: 10, to: 9}
  56. ];
  57. // create a network
  58. var container = document.getElementById('mynetwork');
  59. var data = {
  60. nodes: nodes,
  61. edges: edges
  62. };
  63. var options = {layout: {randomSeed: 8}};
  64. var network = new vis.Network(container, data, options);
  65. // set the first initial zoom level
  66. network.once('initRedraw', function() {
  67. if (lastClusterZoomLevel === 0) {
  68. lastClusterZoomLevel = network.getScale();
  69. }
  70. });
  71. network.on('zoom', function (params) {
  72. if (params.direction == '-') {
  73. if (params.scale < lastClusterZoomLevel*clusterFactor) {
  74. makeClusters(params.scale);
  75. lastClusterZoomLevel = params.scale;
  76. }
  77. }
  78. else {
  79. openClusters(params.scale);
  80. }
  81. });
  82. network.on("selectNode", function (params) {
  83. if (params.nodes.length == 1) {
  84. if (network.isCluster(params.nodes[0]) == true) {
  85. network.openCluster(params.nodes[0])
  86. }
  87. }
  88. });
  89. function makeClusters(scale) {
  90. var clusterOptionsByData = {
  91. processProperties: function (clusterOptions) {
  92. clusterIndex = clusterIndex + 1;
  93. clusterOptions.label = clusterIndex;
  94. clusterOptions.id = 'cluster:' + clusterIndex;
  95. clusters.push({id:'cluster:' + clusterIndex, scale:scale});
  96. return clusterOptions;
  97. },
  98. clusterNodeProperties: {borderWidth: 3, shape: 'box', font: {size: 30}}
  99. }
  100. network.clusterOutliers(clusterOptionsByData);
  101. }
  102. function openClusters(scale) {
  103. var newClusters = [];
  104. for (var i = 0; i < clusters.length; i++) {
  105. if (clusters[i].scale < scale) {
  106. network.openCluster(clusters[i].id);
  107. lastClusterZoomLevel = scale;
  108. }
  109. else {
  110. newClusters.push(clusters[i])
  111. }
  112. }
  113. clusters = newClusters;
  114. }
  115. </script>
  116. </body>
  117. </html>