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.
139 lines
3.0 KiB
139 lines
3.0 KiB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Graph | Random nodes</title>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
font: 10pt sans;
|
|
}
|
|
#mygraph {
|
|
width: 600px;
|
|
height: 600px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../dist/vis.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var nodes = null;
|
|
var edges = null;
|
|
var graph = null;
|
|
|
|
function draw() {
|
|
nodes = [];
|
|
edges = [];
|
|
var connectionCount = [];
|
|
|
|
// randomly create some nodes and edges
|
|
for (var i = 0; i < 15; i++) {
|
|
nodes.push({
|
|
id: i,
|
|
label: String(i)
|
|
});
|
|
}
|
|
edges.push({
|
|
from: 0,
|
|
to: 1
|
|
});
|
|
edges.push({
|
|
from: 0,
|
|
to: 6
|
|
});
|
|
edges.push({
|
|
from: 0,
|
|
to: 13
|
|
});edges.push({
|
|
from: 0,
|
|
to: 11
|
|
});
|
|
edges.push({
|
|
from: 1,
|
|
to: 2
|
|
});
|
|
edges.push({
|
|
from: 2,
|
|
to: 3
|
|
});
|
|
edges.push({
|
|
from: 2,
|
|
to: 4
|
|
});
|
|
edges.push({
|
|
from: 3,
|
|
to: 5
|
|
});
|
|
edges.push({
|
|
from: 1,
|
|
to: 10
|
|
});
|
|
edges.push({
|
|
from: 1,
|
|
to: 7
|
|
});
|
|
edges.push({
|
|
from: 2,
|
|
to: 8
|
|
});
|
|
edges.push({
|
|
from: 2,
|
|
to: 9
|
|
});
|
|
edges.push({
|
|
from: 3,
|
|
to: 14
|
|
});
|
|
edges.push({
|
|
from: 1,
|
|
to: 12
|
|
});
|
|
nodes[0]["level"] = 0;
|
|
nodes[1]["level"] = 1;
|
|
nodes[2]["level"] = 3;
|
|
nodes[3]["level"] = 4;
|
|
nodes[4]["level"] = 4;
|
|
nodes[5]["level"] = 5;
|
|
nodes[6]["level"] = 1;
|
|
nodes[7]["level"] = 2;
|
|
nodes[8]["level"] = 4;
|
|
nodes[9]["level"] = 4;
|
|
nodes[10]["level"] = 2;
|
|
nodes[11]["level"] = 1;
|
|
nodes[12]["level"] = 2;
|
|
nodes[13]["level"] = 1;
|
|
nodes[14]["level"] = 5;
|
|
|
|
|
|
// create a graph
|
|
var container = document.getElementById('mygraph');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
|
|
var options = {
|
|
hierarchicalLayout:true
|
|
};
|
|
graph = new vis.Graph(container, data, options);
|
|
|
|
// add event listeners
|
|
graph.on('select', function(params) {
|
|
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="draw();">
|
|
<h2>Hierarchical Layout - User-defined</h2>
|
|
<div style="width:700px; font-size:14px;">
|
|
This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
|
|
</div>
|
|
<br />
|
|
|
|
<div id="mygraph"></div>
|
|
|
|
<p id="selection"></p>
|
|
</body>
|
|
</html>
|