Layouts

reagraph has the following layout types:

• Force Directed 2D
• Force Directed 3D
• Circular 2D
• Concentric 2D
• Concentric 3D
• Tree Top Down 2D
• Tree Left Right 2D
• Tree Top Down 3D
• Tree Left Right 3D
• Radial Out 2D
• Radial Out 3D
• Hierarchical Top Down 2D
• Hierarchical Left Right 2D
• No Overlap 2D
• ForceAtlas2 2D
• Custom

Layout Overrides

You can override the default layout options for each respective layout using the layoutOverrides property on the GraphCanvas component. In each layout description, it will list the available overrides for that layout if applicable.

Position Overrides

You can override the position in any layout by passing the getNodePosition property to the canvas.

The getNodePosition property has the following signature:

getNodePosition: (
  id: string,
  args: NodePositionArgs
) => InternalGraphPosition;

where NodePositionArgs is:

Custom Layout Draggable

To keep draggable nodes in place, you can use the drags property to get the position of the node when it is dragged.

getNodePosition: (id: string, { nodes, drags }: NodePositionArgs) => {
  const dragPosition = drags?.[id]?.position;
  if (dragPosition) {
    return dragPosition;
  }
  // ...
}

Layout Types

Below are examples of each layout type and corresponding descriptions.

Force Directed 2D

This is the standard force-directed layout which uses d3-force-3d . This is a modified version of the force directed library from d3 except adds support for three dimensional layouts.

This is a one of the most common layouts used because of the simplicity and flexibility that the layout can support.

This layout supports the following overrides:

Force Directed 3D

The force directed 3d layout is similar to the 2D version except it adds another dimension. It uses the same library as the 2D version ( d3-force-3d  ). The 3D version is useful for very large graphs where many nodes would overlap each other.

This layout accepts the same layout overrides as the forceDirected2d.

Circular 2D

The circular layout arranges nodes in a circular fashion drawing relationships between the nodes on the outside of the circle.

This layout supports the following overrides:

Concentric 2D

The concentric layout organises the nodes into concentric circles, based on the specified metric (data.level). The nodes with the lowest metric values are placed in the innermost circle, and the metric values of the nodes acend for each outward circle. Each circle has nodes with metric values between a specified range. This layout is useful for highlighting relative importance of the nodes, and its visual effect can be reinforced by creating a style mapper to the metric — e.g. nodes with larger metric values are darker in colour.

This layout supports the following configuration options:

Concentric 3D

This layout works just like Concentric 2D, using the same interface and configuration. The only difference is that it arranges nodes on spheres instead of circles.

Tree Top Down 2D

Tree Left Right 2D

The tree layout is a good way to display a clear parent-child relationship between nodes. This layout uses d3-force-3d .

This layout accepts the same layout overrides as the forceDirected2d.

Tree 3D

This layout is the same as the tree 2d except adds another dimension. It uses d3-force-3d  under the hood for the layout.

This layout accepts the same layout overrides as the forceDirected2d.

Radial 2D

The radial layout arranges nodes in a circular fashion around the focus node in a radial tree. Each relationship extends to another level in the tree to show a depedency tree. This layout uses d3-force-3d .

This layout accepts the same layout overrides as the forceDirected2d.

Radial 3D

Similar to the Radial 2D but adds another dimension. This layout uses d3-force-3d .

This layout accepts the same layout overrides as the forceDirected2d.

Hierarchical 2D

This layout uses d3-hierarchy .

This layout supports the following overrides:

No Overlap

This layout uses graphology-layout-nooverlap .

This layout supports the following overrides:

Force Atlas 2

This layout uses graphology-layout-forceatlas2 .

This layout supports the following overrides:

Custom Layouts

For creating custom layouts, you can use the getNodePosition function described in the Position Overrides section above. This allows you to implement your own positioning logic for nodes based on your specific requirements.