Network - layout

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

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,
    improvedLayout:true,
    clusterThreshold: 150,
    hierarchical: {
      enabled:false,
      levelSeparation: 150,
      nodeSpacing: 100,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'hubsize',  // hubsize, directed
      shakeTowards: 'leaves'  // roots, leaves
    }
  }
}

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 or String	`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.
improvedLayout	Boolean	`true`	When enabled, the network will use the Kamada Kawai algorithm for initial layout. For networks larger than 100 nodes, clustering will be performed automatically to reduce the amount of nodes. This can greatly improve the stabilization times. If the network is very interconnected (no or few leaf nodes), this may not work and it will revert back to the old method. Performance will be improved in the future.
clusterThreshold	Number	`150`	Cluster threshold to which `improvedLayout` applies.
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.nodeSpacing	Number	`100`	Minimum distance between nodes on the free axis. This is only for the initial layout. If you enable physics, the node distance there will be the effective node distance.
hierarchical.treeSpacing	Number	`200`	Distance between different trees (independent networks). This is only for the initial layout. If you enable physics, the repulsion model will denote the distance between the trees.
hierarchical.blockShifting	Boolean	`true`	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. This is mainly for the initial layout. If you enable physics, the layout will be determined by the physics. This will greatly speed up the stabilization time though!
hierarchical.edgeMinimization	Boolean	`true`	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. This is mainly for the initial layout. If you enable physics, the layout will be determined by the physics. This will greatly speed up the stabilization time though!
hierarchical.parentCentralization	Boolean	`true`	When true, the parents nodes will be centered again after the layout algorithm has been finished.
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.
hierarchical.shakeTowards	String	`'leaves'`	Controls whether in `directed` layout should all the roots be lined up at the top and their child nodes as close to their roots as possible (`roots`) or all the leaves lined up at the bottom and their parents as close to their children as possible (`leaves`, default).

Third party docs: