The nodes with the same depth will be layed on the same level. The node size will be considred while doing layout.

Usage

CompactBox is an appropriate layout method for tree data structure. As the demo below, you can deploy it in layout while instantiating Graph.

You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.

direction

Type: String
Options: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default: 'LR'
Required: false
Explanation: The direction of layout.

• TB —— Root is on the top, layout from the top to the bottom

• BT —— Root is on the bottom, layout from the bottom to the top

• LR —— Root is on the left, layout from the left to the right

• RL —— Root is on the right, layout from the right to the left

• H —— Root is on the middle, layout in horizontal symmetry.

• V —— Root is on the middle, layout in vertical symmetry.

getWidth

Type: Number | Function
Example:

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

Required: false
Explanation: The width of each node

getHeight

Type: Number | Function
Example:

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

Required: false
Explanation: The height of each node

getHGap

Type: Number | Function
Example:

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

Default: 18
Required: false
Explanation: The horizontal separation of nodes

getVGap

Type: Number | Function
Example:

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

Default: 18
Required: false
Explanation: The vertical separation of nodes

radial

Type: Boolean
Default: false
Required: false
Explanation: If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':