Indented

2 min read

Indented layout represents the hierarchy by indent between them. Each node will take a row/column. It is appropriate for file directory.

img

layoutCfg.direction

Type: String
Options: 'LR' | 'RL' | 'H'
Default: 'LR'
Required: false
Description: The direction of layout:

  • LR —— Root is on the left, layout from the left to the right(left image below)
  • RL —— Root is on the right, layout from the right to the left(center image below)
  • H —— Root is on the middle, layout in horizontal symmetry(right image below)
img img img

(Left)LR. (Center)RL. (Right)H.

layoutCfg.indent

Type: Number | Function
Default: 20
Example

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

Required: false
Description: When the type is Number, the colunm separation is a fixed value; When the type is Function, the distance between the node and the root node is the returned value of the function.

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. Takes effect only when direction is 'H'

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.getSide

Type: Function
Example:

(d) => {
  // d is a node
  if (d.id === 'testId') return 'left';
  return '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.

layoutCfg.dropCap

Type: Boolean


Required: false


Explanation: Whether place the first child node at the next line. true by default