Skip to Content
Docs🚀 ⏐ Getting StartedLayouts

Layouts

reagraph has the following layout types:

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.

export interface NodePositionArgs {
  /**
   * The graphology object. Useful for any graph manipulation.
   */
  graph: Graph;
 
  /**
   * Any nodes that were dragged. This is useful if you want to override
   * the position of a node when dragged.
   */
  drags?: DragReferences;
 
  /**
   * The nodes for the graph.
   */
  nodes: InternalGraphNode[];
 
  /**
   * The edges for the graph.
   */
  edges: InternalGraphEdge[];
}
 
/**
 * Get the node position for a given node id.
 */
getNodePosition: (
  id: string,
  args: NodePositionArgs
) => InternalGraphPosition;

See custom layouts for more information.

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:

export interface ForceDirectedLayoutInputs extends LayoutFactoryProps {
  /**
   * Center inertia for the layout. Default: 1.
   */
  centerInertia?: number;
 
  /**
   * Number of dimensions for the layout. 2d or 3d.
   */
  dimensions?: number;
 
  /**
   * Mode for the dag layout. Only applicable for dag layouts.
   */
  mode?: DagMode;
 
  /**
   * Distance between links.
   */
  linkDistance?: number;
 
  /**
   * Strength of the node repulsion.
   */
  nodeStrength?: number;
 
  /**
   * Strength of the cluster repulsion.
   */
  clusterStrength?: number;
 
  /**
   * The type of clustering.
   */
  clusterType?: 'force' | 'treemap';
 
  /**
   * Ratio of the distance between nodes on the same level.
   */
  nodeLevelRatio?: number;
 
  /**
   * LinkStrength between nodes of different clusters
   */
  linkStrengthInterCluster?: number;
 
  /**
   * LinkStrength between nodes of the same cluster
   */
  linkStrengthIntraCluster?: number;
 
  /**
   * Charge between the meta-nodes (Force template only)
   */
  forceLinkDistance?: number;
 
  /**
   * Used to compute the template force nodes size (Force template only)
   */
  forceLinkStrength?: number;
 
  /**
   * Used to compute the template force nodes size (Force template only)
   */
  forceCharge?: number;
}

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:

export interface CircularLayoutInputs extends LayoutFactoryProps {
  /**
   * Radius of the circle.
   */
  radius: 300;
}

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:

export interface HierarchicalLayoutInputs extends LayoutFactoryProps {
  /**
   * Direction of the layout. Default 'td'.
   */
  mode?: 'td' | 'lr';
  /**
  * Factor of distance between nodes. Default 1.
  */
  nodeSeparation?: number;
  /**
  * Size of each node. Default [50,50]
  */
  nodeSize?: [number, number];
}

No Overlap

This layout uses graphology-layout-nooverlap .

This layout supports the following overrides:

export interface NoOverlapLayoutInputs extends LayoutFactoryProps {
  /**
   * Grid size. Default 20.
   */
  gridSize?: number;
 
  /**
   * Ratio of the layout. Default 10.
   */
  ratio?: number;
 
  /**
   * Maximum number of iterations. Default 50.
   */
  maxIterations?: number;
 
  /**
   * Margin between nodes. Default 10.
   */
  margin?: number;
}

Force Atlas 2

This layout uses graphology-layout-forceatlas2 .

This layout supports the following overrides:

export interface ForceAtlas2LayoutInputs extends LayoutFactoryProps {
  /**
   * Should the node’s sizes be taken into account. Default: false.
   */
  adjustSizes?: boolean;
 
  /**
   * whether to use the Barnes-Hut approximation to compute
   * repulsion in O(n*log(n)) rather than default O(n^2),
   * n being the number of nodes. Default: false.
   */
  barnesHutOptimize?: boolean;
 
  /**
   * Barnes-Hut approximation theta parameter. Default: 0.5.
   */
  barnesHutTheta?: number;
 
  /**
   * Influence of the edge’s weights on the layout. To consider edge weight, don’t
   *  forget to pass weighted as true. Default: 1.
   */
  edgeWeightInfluence?: number;
 
  /**
   * Strength of the layout’s gravity. Default: 10.
   */
  gravity?: number;
 
  /**
   * Whether to use Noack’s LinLog model. Default: false.
   */
  linLogMode?: boolean;
 
  /**
   * Whether to consider edge weights when calculating repulsion. Default: false.
   */
  outboundAttractionDistribution?: boolean;
 
  /**
   * Scaling ratio for repulsion. Default: 100.
   */
  scalingRatio?: number;
 
  /**
   * Speed of the slowdown. Default: 1.
   */
  slowDown?: number;
 
  /**
   * Whether to use the strong gravity mode. Default: false.
   */
  strongGravityMode?: boolean;
 
  /**
   * Number of iterations to perform. Default: 50.
   */
  iterations?: number;
}

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.

Last updated on
FAQNextJS