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.
89 lines
2.9 KiB
89 lines
2.9 KiB
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hierarchical Layout without Physics</title>
|
|
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
|
<script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script>
|
|
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
|
<style type="text/css">
|
|
#network{
|
|
width: 1000px;
|
|
height: 400px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
|
|
td {
|
|
vertical-align:top;
|
|
}
|
|
table {
|
|
width:800px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Hierarchical Layout without Physics</h1>
|
|
The hierarchical layout can now be controlled without the use of physics. This is much quicker. The options for this are: <br /><br />
|
|
|
|
<table>
|
|
<tr>
|
|
<td width="150px"><code>levelSeparation</code></td>
|
|
<td width="400px">Distance between levels.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>nodeSpacing</code></td>
|
|
<td>Minimum distance between nodes on the free axis.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>treeSpacing</code></td>
|
|
<td>Distance between different trees (independent networks).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>blockShifting</code></td>
|
|
<td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift
|
|
it's branch along with it for as far as it can, respecting the nodeSpacing on any level.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>edgeMinimization</code></td>
|
|
<td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process.
|
|
Each node will try to move along its free axis to reduce the total length of it's edges.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>parentCentralization</code></td>
|
|
<td>When true, the parents nodes will be centered again after the the layout algorithm has been finished.</td>
|
|
</tr>
|
|
</table>
|
|
<br /><br />
|
|
Play with the settings below the network and see how the layout changes!
|
|
<div id="network"></div>
|
|
<script>
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
// create a network
|
|
var container = document.getElementById('network');
|
|
var options = {
|
|
layout: {
|
|
hierarchical: {
|
|
direction: "UD",
|
|
sortMethod: "directed"
|
|
}
|
|
},
|
|
interaction: {dragNodes :false},
|
|
physics: {
|
|
enabled: false
|
|
},
|
|
configure: {
|
|
filter: function (option, path) {
|
|
if (path.indexOf('hierarchical') !== -1) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
showButton:false
|
|
}
|
|
};
|
|
var network = new vis.Network(container, data, options);
|
|
</script>
|
|
</body>
|
|
</html>
|