<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cluster Test</title> <script type="text/javascript" src="../../../dist/vis.js"></script> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #network_graph { width: 1000px; height: 800px; border: 1px solid lightgray; } </style> </head> <body onload="draw()"> <p> Clusters can contain other clusters, but clusters of a single node is only possible by adding <pre>allowSingleNodeCluster: true</pre> to clusterNodeProperties<br/> In this example repeatedly clicking on the node with open the Clusters. </p> <div id="network_graph"></div> <div id="info"></div> <script type="text/javascript"> var network; var node_color = ['orange', 'green', 'red', 'yellow', 'cyan']; var node_shape = ['star', 'database', 'diamond', 'square', 'triangle']; var nodes = new vis.DataSet([ {id: 'x', label: 'Node X'}, {id: 'y', label: 'Node Y'}, ]); var network_options = {}; var edges = new vis.DataSet([ {from: 'x', to: 'y'} ]); var cluster_id = 1; function draw() { network = new vis.Network( document.getElementById('network_graph'), { nodes: nodes, edges: edges }, network_options ); network.on('click', function (params) { if (params.nodes.length == 1) { if (network.isCluster(params.nodes[0]) == true) { network.openCluster(params.nodes[0]); } } }); cluster(); cluster(); cluster(); } function cluster() { var clusterOptions = { joinCondition: function (childOptions) { console.log(childOptions); return true; }, clusterNodeProperties: {id: cluster_id, label: "Cluster " + cluster_id, color: node_color[cluster_id - 1], shape: node_shape[cluster_id - 1], allowSingleNodeCluster: true} }; cluster_id++; network.cluster(clusterOptions); } </script> </body> </html>