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