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.

107 lines
3.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-network.min.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. Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
  25. <li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li>
  26. <li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li>
  27. </ul>
  28. </p>
  29. <div id="mynetwork"></div>
  30. <pre id="eventSpan"></pre>
  31. <script type="text/javascript">
  32. // create an array with nodes
  33. var nodes = [
  34. {id: 1, label: 'Node 1', color:'orange'},
  35. {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
  36. {id: 3, label: 'Node 3', color:'orange'},
  37. {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
  38. {id: 5, label: 'Node 5', color:'orange'},
  39. {id: 6, label: 'cid = 1', cid:1, color:'orange'},
  40. {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
  41. {id: 8, label: 'cid = 1', cid:1, color:'lime'},
  42. {id: 9, label: 'cid = 1', cid:1, color:'orange'},
  43. {id: 10, label: 'cid = 1', cid:1, color:'lime'}
  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. var clusterOptionsByData = {
  66. joinCondition:function(childOptions) {
  67. return childOptions.cid == 1;
  68. },
  69. clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
  70. };
  71. network.cluster(clusterOptionsByData);
  72. network.on("selectNode", function(params) {
  73. if (params.nodes.length == 1) {
  74. if (network.isCluster(params.nodes[0]) == true) {
  75. network.clustering.updateClusteredNode(params.nodes[0], {shape : 'star'});
  76. }
  77. }
  78. });
  79. network.on("selectEdge", function(params) {
  80. if (params.edges.length == 1) {
  81. // Single edge selected
  82. var obj = {};
  83. obj.clicked_id = params.edges[0];
  84. network.clustering.updateEdge(params.edges[0], {color : '#aa0000'});
  85. obj.base_edge = network.clustering.getBaseEdge(params.edges[0]);
  86. obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]);
  87. document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4);
  88. }
  89. });
  90. </script>
  91. </body>
  92. </html>