<!doctype html>
<html>
<head>
<title>Network | Basic usage</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: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var nodes = new vis.DataSet()
nodes.add({id:'A', label:"A", x:0, y:0})
nodes.add({id:'B', label:"B", x:100, y:0})
nodes.add({id:'C', label:"C", x:200, y:0})
nodes.add({id:'D', label:"D", x:0, y:100})
nodes.add({id:'E', label:"E", x:100, y:100})
nodes.add({id:'F', label:"F", x:200, y:100})
nodes.add({id:'G', label:"G", x:-100, y:200})
var edges = new vis.DataSet()
edges.add({id:'1', from:"A", to:"B"})
edges.add({id:'2', from:"B", to:"C"})
edges.add({id:'3', from:"D", to:"E"})
edges.add({id:'4', from:"E", to:"F"})
edges.add({id:'5', from:"D", to:"G"})
var options = {physics:false, edges:{smooth:false}};
var network = new vis.Network(document.getElementById("mynetwork"), {
nodes: nodes,
edges: edges
}, options)
console.log("MAKE C1")
network.cluster({
joinCondition:function(nodeOptions) {
return nodeOptions.id == "B" || nodeOptions.id == "E";
},
clusterNodeProperties: {id:'C1', label:"C1"}
})
console.log("MAKE C2")
network.cluster({
joinCondition:function(nodeOptions) {
return nodeOptions.id == "D" || nodeOptions.id == "G";
},
clusterNodeProperties: {id:'C2', label:"C2"}
})
network.openCluster('C1', {
releaseFunction: function (cpos, npos) {
console.log(npos)
return npos;
}
})
</script>
</body>
</html>