diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
| commit | b28028ac4082842143b0f528d6bc539da6ccb419 (patch) | |
| tree | 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html')
| -rw-r--r-- | www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html new file mode 100644 index 00000000..55670d7c --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html @@ -0,0 +1,89 @@ +<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>
\ No newline at end of file |