<!doctype html>
<html>
<head>
<title>Network | Clustering</title>
<script type="text/javascript" src="../dist/vis.js"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
p {
max-width: 600px;
}
h4 {
margin-bottom: 3px;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: '1'},
{id: 2, label: '2'},
{id: 3, label: '3'},
{id: 4, label: '4'},
{id: 'a', label: 'a'},
{id: 'b', label: 'b'},
{id: 'c', label: 'c'},
{id: 'd', label: 'd'}
];
// create an array with edges
var edges = [
{from: '1', to: '2', arrows:'to'},
{from: '2', to: '3', arrows:'to'},
{from: '3', to: '4', arrows:'to'},
{from: 'a', to: 'b', arrows:'to'},
{from: 'b', to: 'c', arrows:'to'},
{from: 'c', to: 'd', arrows:'to'}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: {
navigationButtons: true
},
layout: {randomSeed: 8}
};
var network = new vis.Network(container, data, options);
// if we click on a node, we want to open it up!
network.on("selectNode", function (params) {
if (params.nodes.length == 1) {
if (network.isCluster(params.nodes[0]) == true) {
network.openCluster(params.nodes[0])
}
}
});
setTimeout(function() {
// alert("Clustering 2 and 'b'");
var clusterOptionsByData = {
joinCondition: function(node) {
if (node.id == '2' || node.id == 'b')
return true;
return false;
},
clusterNodeProperties: {id:"c1", label:'c1'}
}
network.cluster(clusterOptionsByData);
}, 1)
setTimeout(function() {
// alert("Clustering 4 and 'd'");
var clusterOptionsByData = {
joinCondition: function(node) {
if (node.id == '4' || node.id == 'd')
return true;
return false;
},
clusterNodeProperties: {id:"c2", label:'c2'}
}
network.cluster(clusterOptionsByData);
}, 100)
setTimeout(function() {
// alert('Changing to UD layout');
customLayout = { hierarchical: { direction: "UD" } };
network.setOptions({layout: customLayout});
}, 300)
// setTimeout(function() {
// alert('Changing to DEFAULT layout, but does not work');
// customLayout = {};
// network.setOptions({"layout": {
// "hierarchical": {
// "enabled": false
// }
// }});
// }, 15000)
</script>
</body>
</html>