logoCreated with Sketch.

G6

TreeGraph Layout

6 min read

CompactBox

CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout. It comes from classical Reingold–Tilford tidy layout algorithm.

Configuration

direction

Type: String
Options: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default: 'LR'
Required: false
Description: 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.

getId

Type: Function
Example: 

d => {
  // d is a node
  return d.id + '_node';
};

Required: false
Description: Sets the id for each node

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

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

getHGap

Type: Number | Function
Example: 

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

Default: 18
Required: false
Description: 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
Description: The vertical separation of nodes

radial

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

Dendrogram

Dendrogram arranges all the leaves on the same level. It is appropriate for hierarchical clustering. It does not consider the node size, which will be regarded as 1px.

Configuration

direction

Type: String
Options: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default: 'LR'
Required: false
Description: 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.

nodeSep

Type: Number
Default: 0
Required: false
Description: Node separation

rankSep

Type: Number
Default: 0
Required: false
Description: Level separation

radial

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

Indented

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

Configuration

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)

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

indent

Type: Number
Default: 20
Required: false
Description: Colunm separation

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

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

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.

Mindmap

Mindmap arranged the nodes with same depth on the same level. Different from compactBox, it does not consider the size of nodes while doing layout.

Configuration

direction

Type: String
Options: 'H' | 'V'
Default: 'H'
Required: false
Description: The direction of layout.

  • 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
Description: 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
Description: 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
Description: 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
Description: The vertical separation of nodes

getSide

Type: Function
Example: 

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

Default: '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