vis.js - Layout documentation.

# Network - layout

Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.

Back to overview.

### Options

The options for the layout module have to be contained in an object titled 'layout'.

Click on the full options or shorthand options to show how these options are supposed to be used.

    // these are all options in full.
    var options = {
      layout: {
        randomSeed: undefined,
        hierarchical: {
          enabled:false,
          levelSeparation: 150,
          direction: 'UD',   // UD, DU, LR, RL
          sortMethod: 'hubsize' // hubsize, directed
        }
      }
    }

    network.setOptions(options);

    // only the options that have shorthand notations are shown.
    var options = {
      layout:{
        hierarchical: true
      }
    }

    network.setOptions(options);

When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.

Name | Type | Default | Description
randomSeed | Number | `undefined` | When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the `getSeed()` method to ascertain the seed.
hierarchical | Object or Boolean | `Object` | When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.
hierarchical.enabled | Boolean | `false` | Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.
hierarchical.levelSeparation | Number | `150` | The distance between the different levels.
hierarchical.direction | String | `'UD'` | The direction of the hierarchical layout. The available options are: `UD, DU, LR, RL`. To simplify: up-down, down-up, left-right, right-left.
hierarchical.sortMethod | String | `'hubsize'` | The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: `hubsize, directed`. Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.