Absolute Layout

This layout, by default, retrieves positioning values from the `x` and `y` values in your vertex data and uses these to position the SVG element representing a vertex. However, you can provide your own function to extract appropriate values, should you need to.

In many diagrams, the positions of the shapes are determined by the users, and so VisuallyJs uses the Absolute layout as a default. If you need to render a dataset that a human being has never manipulated, you can use the ForceDirected layout, which extends the Absolute layout and only calculates a position for vertices that do not have values set for their position.

There are also a number of other layouts you can use. One layout which you may find useful is the Hierarchy layout, which lays out shapes in a tree.

Parameters

AbsoluteLayoutParameters

Constructor parameters for an AbsoluteLayout.

Name	Type	Description
absoluteBacked?	boolean	Defaults to false. If true, then the layout will use any position values found in the data for a given vertex.
height?	number	Optional fixed height for the layout.
locationFunction?	LocationFunction	Optional function that, given some vertex, can provide the x/y location of the vertex on the canvas
padding?	PointXY	Optional padding to put around the elements.
width?	number	Optional fixed width for the layout.

Calculation of location

Location Function

If you provide a locationFunction, it will be passed each vertex and is expected to return a position for the given vertex in the form {x:number, y:number}

locationFunction:(v:Vertex):PointXY =>{
  return {x:node.data.xPosition, y:node.data.yPosition }
}

Location inside a group

If a node is a child of a group, when the group performs a layout of its child nodes, it will pass itself as the second argument to the location function:

locationFunction:(v:Vertex, parent:Group):PointXY =>{
  // perhaps here you want to do something unique to each group
}

group is only ever assigned a value during the group layout phase. When processing the layout of nodes and groups, group will be null.

Positioning properties

For Surface/Paper UIs the default positioning properties are left and top, for instance:

{
  "id": "node1",
  "left": 50,
  "top": 250
}

For Diagram UIs the default positioning properties are x and y:

{
  "id": "node1",
  "type": "process",
  "x": 50,
  "y": 250
}