Skip to main content

Absolute layout

This layout, by default, retrieves the left and top members in your Node's data, and uses these as the left and top CSS properties. However, you can provide your own function to extract appropriate values, should you need to.

For applications in which the positions of the nodes is determined by your users, the Absolute layout is a good choice. 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 nodes that do not have values set for their position.


Interface AbsoluteLayoutParameters

Constructor parameters for an AbsoluteLayout.


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 {, }

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.