Mon 21 Jul 22:43:21 CEST 2025

2025-07-21 22:57:33 +02:00 · 2025-07-21 22:57:33 +02:00 · 6b06686864
commit 6b06686864
parent ccd34ed949
1 changed files with 141 additions and 0 deletions
--- a/js/dos/ext/vis/examples/network/other/clustering.html
+++ b/js/dos/ext/vis/examples/network/other/clustering.html
@ -0,0 +1,141 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Clustering</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+        width: 600px;
+        height: 600px;
+        border: 1px solid lightgray;
+    }
+    p {
+        max-width:600px;
+    }
+
+    h4 {
+        margin-bottom:3px;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+
+<p>
+Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it.
+</p>
+
+<input type="button" onclick="clusterByCid()" value="Cluster all nodes with CID = 1"> <br />
+<input type="button" onclick="clusterByColor()" value="Cluster by color"> <br />
+<input type="button" onclick="clusterByConnection()" value="Cluster 'node 1' by connections"> <br />
+<input type="button" onclick="clusterOutliers()" value="Cluster outliers"> <br />
+<input type="button" onclick="clusterByHubsize()" value="Cluster by hubsize"> <br />
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = [
+    {id: 1,  label: 'Node 1', color:'orange'},
+    {id: 2,  label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
+    {id: 3,  label: 'Node 3', color:'orange'},
+    {id: 4,  label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
+    {id: 5,  label: 'Node 5', color:'orange'},
+    {id: 6,  label: 'cid = 1', cid:1, color:'orange'},
+    {id: 7,  label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
+    {id: 8,  label: 'cid = 1', cid:1, color:'lime'},
+    {id: 9,  label: 'cid = 1', cid:1, color:'orange'},
+    {id: 10, label: 'cid = 1', cid:1, color:'lime'}
+  ];
+
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2},
+    {from: 1, to: 3},
+    {from: 10, to: 4},
+    {from: 2, to: 5},
+    {from: 6, to: 2},
+    {from: 7, to: 5},
+    {from: 8, to: 6},
+    {from: 9, to: 7},
+    {from: 10, to: 9}
+  ];
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {layout:{randomSeed:8}};
+  var network = new vis.Network(container, data, options);
+  network.on("selectNode", function(params) {
+      if (params.nodes.length == 1) {
+          if (network.isCluster(params.nodes[0]) == true) {
+              network.openCluster(params.nodes[0]);
+          }
+      }
+  })
+
+  function clusterByCid() {
+      network.setData(data);
+      var clusterOptionsByData = {
+          joinCondition:function(childOptions) {
+              return childOptions.cid == 1;
+          },
+          clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
+      }
+      network.cluster(clusterOptionsByData);
+  }
+  function clusterByColor() {
+      network.setData(data);
+      var colors = ['orange','lime','DarkViolet'];
+      var clusterOptionsByData;
+      for (var i = 0; i < colors.length; i++) {
+          var color = colors[i];
+          clusterOptionsByData = {
+              joinCondition: function (childOptions) {
+                  return childOptions.color.background == color; // the color is fully defined in the node.
+              },
+              processProperties: function (clusterOptions, childNodes, childEdges) {
+                  var totalMass = 0;
+                  for (var i = 0; i < childNodes.length; i++) {
+                      totalMass += childNodes[i].mass;
+                  }
+                  clusterOptions.mass = totalMass;
+                  return clusterOptions;
+              },
+              clusterNodeProperties: {id: 'cluster:' + color, borderWidth: 3, shape: 'database', color:color, label:'color:' + color}
+          }
+          network.cluster(clusterOptionsByData);
+      }
+  }
+  function clusterByConnection() {
+      network.setData(data);
+      network.clusterByConnection(1)
+  }
+  function clusterOutliers() {
+      network.setData(data);
+      network.clusterOutliers();
+  }
+  function clusterByHubsize() {
+      network.setData(data);
+      var clusterOptionsByData = {
+          processProperties: function(clusterOptions, childNodes) {
+            clusterOptions.label = "[" + childNodes.length + "]";
+            return clusterOptions;
+          },
+          clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
+      }
+      network.clusterByHubsize(undefined, clusterOptionsByData);
+  }
+
+</script>
+
+</body>
+</html>