Nodes of the same depth will be placed on the same layer. Unlike compactBox, the layout does not take into account the size of the nodes.

Options

direction

'H' | 'V' Default: 'H'

The direction of the tree layout

• 'H': Horizontal - The child nodes of the root node are divided into two parts and placed horizontally to the left and right sides of the root node

• 'V': Vertical - Arrange all child nodes of the root node vertically

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;
};

getSide

(d?:_ Node__) => string

Node placement is to the left or right of the root node. If this value is set, all nodes will be on the same side of the root node, which means that direction = 'H' will no longer be effective. If this parameter is a callback function, it can specify the left or 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';
};