Compact Box Tree Layout. This is the default layout for tree diagrams,its characteristic is that during the layout process, it takes into account the bounding box of each tree node, derived from the classic Reingold–Tilford tidy layout algorithmsuitable for applications such as mind maps.

Options

direction

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

Tree Layout Direction

• 'TB': The root node is at the top, with the layout oriented downwards

• 'BT': The root node is at the bottom, with the layout oriented upwards

• 'LR': The root node is on the left, with the layout oriented to the right

• 'RL': The root node is on the right, with the layout oriented to the left

• 'H': The root node is in the center, with a horizontally symmetrical layout

• 'V': The root node is in the center, with a vertically symmetrical layout

getSide

(d?:_ Node__) => string

Nodes are arranged to the left/right side of the root node. If this value is set, all nodes will be on the same side of the root node, which means the 'direction' = 'H' will no longer be effective. If this parameter is a callback function, it can specify the left/right side of the root node for each individual node.

Example:

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

getId

(d?:_ Node__) => string

Callback function for node id

Example:

(d) => {
  // d is a node
  return d.id + '_node';
};

getWidth

(d?:_ Node__) => number

The width of each node

Example:

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

getHeight

(d?:_ Node__) => number

The height of each node

Example:

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

getHGap

(d?:_ Node__) => number

The horizontal gap between each node

Example:

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

getVGap

(d?:_ Node__) => number

The vertical gap between each node

Example:

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

radial

boolean

Whether to use a radial layout. If radial is set to true, it is recommended to set direction to 'LR' or 'RL'.