vis.js is a dynamic, browser-based visualization library
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

<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>