Indented tree layout. The hierarchy of tree nodes is represented by the indentation in the horizontal direction. Each element occupies a row/column. Common use case: file directory structure.

Options

direction

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

Tree layout direction

• 'LR': Root node on the left, layout to the right

• 'RL': Root node on the right, layout to the left

• 'H': Root node in the middle, horizontal symmetric layout

indent

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

Column spacing. If type is Number, the column spacing is fixed; if type is Function, the spacing between the node and the root node is 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

Width of each node, effective when direction is 'H'

Example:

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

getHeight

(d?: Node) => number

Height of each node

Example:

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

getSide

(d?: Node) => string

Whether the node is placed on the left or right side of the root node. If set, all nodes will be on the same side of the root node, i.e., direction = 'H' will not take effect. If this parameter is a callback function, you can specify the side for each node.

Example:

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

dropCap

boolean Default: true

Whether the first child of each node is placed on the next row