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.
75 lines
2.2 KiB
75 lines
2.2 KiB
<!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>
|