JavaScript is required
relation-graph Relational Data Visualization and Editing
Sign in 中文 GitHub

Built-in Layouts

relation-graph provides multiple built-in layout algorithms through RGLayoutOptions.layoutName.

1. Supported Layout Names

Common built-ins:

  • tree
  • force
  • center
  • smart-tree
  • io-tree
  • fixed

Type definitions also include other names in some versions (for example circle, folder).

2. Tree Layout (tree)

Best for hierarchical graphs.

Common options:

  • from
  • treeNodeGapH, treeNodeGapV
  • levelGaps
  • layoutExpansionDirection
  • simpleTree
  • ignoreNodeSize
  • alignItemsX, alignItemsY
  • alignParentItemsX, alignParentItemsY

3. Force Layout (force)

Best for complex network graphs.

Common options:

  • fastStart
  • maxLayoutTimes
  • byNode, byLine
  • force_node_repulsion
  • force_line_elastic

Force layout may support auto-running layout sessions depending on API flow.

4. Center Layout (center)

Good for radial/centered topology around a root.

Common options:

  • distanceCoefficient
  • levelGaps

5. Smart Tree (smart-tree)

Designed for directed relation clarity with bidirectional readability.

Shares many tree-style options:

  • from
  • treeNodeGapH, treeNodeGapV
  • alignment and ignore-size options

6. IO Tree (io-tree)

Separates in-degree and out-degree relationships around nodes.

Useful for input/output flow analysis.

Common options are similar to smart-tree/tree.

7. Fixed Layout (fixed)

Uses node x/y directly.

Use this for:

  • diagram editors
  • persisted canvas positions
  • externally computed coordinates

8. Usage Example

const graphOptions = {
  layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 150,
    treeNodeGapV: 10
  }
};

Or with explicit layouter:

const layouter = graphInstance.createLayout({
  layoutName: 'force',
  maxLayoutTimes: 500,
  force_node_repulsion: 1.2
});
layouter.placeNodes(nodes, rootNode);

9. Selection Guide

  • strict hierarchy: tree
  • directional hierarchy with clearer in/out expression: smart-tree / io-tree
  • dense relationship network: force
  • centered relation map: center
  • manual coordinates/editor: fixed

10. Next Reading