g6/packages/site/docs/manual/middle/layout/tree-graph-layout.en.md

title	order
TreeGraph Layout	1

Introduction

Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, Translating the layouts and their configurations, translating the data can be achieved. Besides, G6 provides the Web-Worker for general graph layout in case layout calculation takes too long to block page interaction.

Besides, G6 supports Custom Layout mechanism for users to design their own layout algorithm.

In fact, 'layout' is a free mechanism in G6. The built-in layouts only calculate and manipulate the x and y in node data. In other word, users can assign x and y to nodes by any other ways including the algorithms from the third-party libraries. Once G6 find the x and y information on data, it will render the graph according to it.

In order to handle the tree data structure, G6 extends Graph to TreeGraph. Refer to: TreeGraph API. TreeGraph is appropriate for visualizing hierarchy data. In this ducoment, we will introduce the TreeGraph layout algorithms in detail.

TreeGraph Layouts Overview

• CompactBox Layout;
• Dendrogram Layout: Arrange the leaves on the same level;
• Indented Layout;
• Mindmap Layout.

Configure the TreeGraph

Similar to Graph, assign layout to Graph instance to set the layout for a TreeGraph. The Expand/Collapse behavior can be assigned to the TreeGraph by modes.

const graph = new G6.TreeGraph({
  container: 'mountNode',
  modes: {
    default: [
      {
        // Assign the collapse/expand behavior
        type: 'collapse-expand',
      },
      'drag-canvas',
    ],
  },
  // Assign the layout
  layout: {
    type: 'dendrogram', // Layout type
    direction: 'LR', // Layout direction is from the left to the right. Options: 'H' / 'V' / 'LR' / 'RL' / 'TB' / 'BT'
    nodeSep: 50, // The distance between nodes
    rankSep: 100, // The distance between adjacent levels
  },
});

Layouts for TreeGraph

compactBox

Description: CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout.

API: CompactBox API
Configuration:

Name	Type	Example/Options	Default	Description
direction	String	'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V'	'LR'	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      (Left)TB. (Right)BT. - 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               (Left)LR. (Right)RL. - H —— Root is on the middle, layout in horizontal symmetry. - V —— Root is on the middle, layout in vertical symmetry.            > (Left)H. (Right)V.
getId	Function	(d) => {   // d is a node   return d.id + 'node'; }	undefined	Sets the id for each node
getHeight	Function	(d) => {   // d is a node   return 10; }	undefined	The height of each node
getWidth	Function	(d) => {   // d is a node   return 20; }	undefined	he width of each node
getVGap	Function	(d) => {   // d is a node   return 100; }	undefined	The vertical separation of nodes
getHGap	Function	(d) => { // d is a node   return 50; }	undefined	The horizontal separation of nodes
radial	Boolean	true	false	If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':

dendrogram

Description: 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 1 px.

API: Dendrogram API
Configuration:

Name	Type	Example/Options	Default	Description
direction	String	'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V'	'LR'	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 > (Left)TB. (Right)BT. - 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 > (Left)LR. (Right)RL. - H —— Root is on the middle, layout in horizontal symmetry. - V —— Root is on the middle, layout in vertical symmetry. > (Left)H. (Right)V.
nodeSep	Number	50	0	Node separation
rankSep	Number	100	0	Level separation
radial	Boolean	true	false	Wheter layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':

indented

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

API: Indented API
Configuration:

Name	Type	Example/Options	Default	Description
direction	String	'LR' / 'RL' / 'H'	'LR'	layout direction '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)
indent	Number	80	20	Colunm separation
getHeight	Function	(d) => {   // d is a node   return 10; }	undefined	The height of each node
getWidth	Function	(d) => {   // d is a node   return 20; }	undefined	The width of each node
getSide	Function	(d) => {   // d is a node   return 'left'; }	undefined	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

Description: 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.

API: Mindmap API
Configuration:

Name	Type	Example/Options	Default	Description
direction	String	'H' / 'V'	'H'	layout direction - H: Root is on the middle, layout in horizontal symmetry. - V: Root is on the middle, layout in vertical symmetry.
getHeight	Function	(d) => {   // d is a node   return 10; }	undefined	The height of each node
getWidth	Function	(d) => {   // d is a node   return 20; }	undefined	The width of each node
getVGap	Function	(d) => {   // d is a node   return 100; }	18	The vertical separation of nodes
getHGap	Function	(d) => {   // d is a node   return 50; }	18	The horizontal separation of nodes
getSide	String	Function	(d) => {   // d is a node   return 'left'; } / 'right'	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