| 
																	
																	
																	
																 | 
																@ -0,0 +1,75 @@ | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<!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> |