Mindmap Tree

Overview

The mindmap tree layout is suitable for hierarchical layouts of tree structures, supporting expansion on both left and right sides. Nodes at the same depth will be placed on the same layer. Note: the layout does take node size into account. See more mindmap layout examples or source code.

Configuration

const graph = new Graph({
  layout: {
    type: 'mindmap',
    direction: 'H',
    preLayout: false,
    getHeight: () => 32,
    getWidth: () => 32,
    getVGap: () => 16,
    getHGap: () => 72,
  },
});

Options

direction

H | LR | RL | TB | BT Default: 'LR'

Tree layout direction

• 'H': horizontal — The children of the root node are divided into two parts and placed on the left and right sides of the root node. You can pass the getSide method to specify the left/right distribution logic for each node. If not provided, the first half will be placed on the right, and the second half on the left by default.

• 'LR' | 'TB': Children are placed on the right side of the root node.

• 'RL': Children are placed on the left side of the root node.

• BT: Children are placed on the right side of the root node, then the entire graph is rotated 180° along the X axis.

getWidth

(d?: Node) => number

Width of each node

Example:

(d) => {
  // d is a node
  if (d.id === 'testId') return 50;
  return 100;
};

getHeight

(d?: Node) => number

Height of each node

Example:

(d) => {
  // d is a node
  if (d.id === 'testId') return 50;
  return 100;
};

getHGap

(d?: Node) => number

Horizontal gap for each node

Example:

(d) => {
  // d is a node
  if (d.id === 'testId') return 50;
  return 100;
};

getVGap

(d?: Node) => number

Vertical gap for each node

Example:

(d) => {
  // d is a node
  if (d.id === 'testId') return 50;
  return 100;
};

getSide

(d?: Node) => string

Set whether the node is placed on the left or right of the root. Note: only effective when direction is H. If not set, the first half of the children will be placed on the right, and the second half on the left by default. See getSide auto calculation logic.

Example:

(d) => {
  // d is a node
  if (d.id === 'test-child-id') return 'right';
  return 'left';
};

Suitable Scenarios

• Data lineage graph: direction='H' is suitable for rendering upstream and downstream lineage of a specified node, with upstream on the left and downstream on the right of the central node.
• Mind map: Build custom mind map components.