Mindmap

2 min read

Mindmap arranged the nodes with same depth on the same level. Different from compactBox, it does not consider the size of nodes while doing layout.

img

layoutCfg.direction

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

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

layoutCfg.getWidth

Type: Number | Function
Example:

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

Required: false
Description: The width of each node

layoutCfg.getHeight

Type: Number | Function
Example:

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

Required: false
Description: The height of each node

layoutCfg.getHGap

Type: Number | Function
Example:

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

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

layoutCfg.getVGap

Type: Number | Function
Example:

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

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

layoutCfg.getSide

Type: Function
Example:

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

Default: 'right'
Required: false
Description: 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