Indented tree layout. The hierarchy of tree nodes is represented by the amount of horizontal indentation. Each element occupies one row/column. Commonly used in scenarios such as file directory structures.

Options

direction

'LR' | 'LR' | 'H' Default: 'LR'

The direction of the tree layout

• '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

indent

Number | (d?:_ _Node__) => string Default: 20

Inter-column spacing. When the type is Number, the inter-column spacing is a fixed value; when the type is Function, the spacing between the node and the root node is determined by the return value of the function.

Example:

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

getWidth

(d?:_ _Node__) => number

The width of each node, effective when direction is set to 'H'

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

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 === 'testId') return 'left';
  return 'right';
};

dropCap

boolean Default: true

Whether the first child node of each node is located on the next line