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.

88 lines
2.8 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Vis Popup Example</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script src="../dist/vis.js" type="text/javascript" ></script>
  16. <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
  17. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  19. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
  20. <script type="text/javascript">
  21. var network = null;
  22. var network2 = null;
  23. function draw() {
  24. // create an array with nodes
  25. var nodes = [
  26. {id: 1, label: 'Node 1'},
  27. {id: 2, label: 'Node 2'},
  28. {id: 3, label: 'Node 3'},
  29. {id: 4, label: 'Node 4'},
  30. {id: 5, label: 'Node 5'}
  31. ];
  32. // create an array with edges
  33. var edges = [
  34. {from: 1, to: 2},
  35. {from: 2, to: 3},
  36. {from: 3, to: 4},
  37. {from: 4, to: 5}
  38. ];
  39. // create a network
  40. var container = document.getElementById('mynetwork');
  41. var data = {
  42. nodes: nodes,
  43. edges: edges
  44. };
  45. var options = {layout:{randomSeed:8}};
  46. network = new vis.Network(container, data, options);
  47. setTimeout(function() {
  48. var clusterOptionsByData = {
  49. joinCondition:function(childOptions) {
  50. return childOptions.id == 2 || childOptions.id == 3 || childOptions.id == 4;
  51. },
  52. clusterNodeProperties: {id:'cid1', label:'cid1'}
  53. }
  54. network.cluster(clusterOptionsByData);
  55. },100);
  56. setTimeout(function() {
  57. var itemId = 'cid1';
  58. network.openCluster([itemId]);
  59. },300);
  60. setTimeout(function() {
  61. var clusterOptionsByData = {
  62. joinCondition:function(childOptions) {
  63. return childOptions.id == 2 || childOptions.id == 3 || childOptions.id == 4;
  64. },
  65. clusterNodeProperties: {id:'cid2', label:'cid2'}
  66. }
  67. network.cluster(clusterOptionsByData);
  68. },1000);
  69. }
  70. </script>
  71. </head>
  72. <body onload="draw();">
  73. <h2>Popup Example</h2>
  74. <div id='mynetwork'></div>
  75. </body>
  76. </html>