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.

• options hidden
• full options
• shorthand options

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