The nodes with same depth will be placed on the same level. Difference from compactBox, Mindmap will not consider the node size.

Usage

Mindmap is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph.

You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.

direction

Type: String
Options: 'H' | 'V'
Default: 'H'
Required: false
Explanation: The direction of layout.

• H —— Root is on the middle, layout in horizontal symmetry.

• V —— Root is on the middle, layout in vertical symmetry.

getWidth

Type: Number | Function
Example:

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

Required: false
Explanation: The width of node

getHeight

Type: Number | Function
Example:

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

Required: false
Explanation: The height of node

getHGap

Type: Number | Function
Example:

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

Default: 18
Required: false
Explanation: The horizontal separation of nodes

getVGap

Type: Number | Function
Example:

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

Default: 18
Required: false
Explanation: The vertical separation of nodes

getSide

Type: Function
Example:

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

Default: 'right'
Required: false
Explanation: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.