Outline

2 min read

Overview

Similar to Graph Layout, G6 provides several built-in TreeGraph layouts, which can be configured to Graph by layout. The differences between TreeGraph and Graph:

  • When instantiating a TreeGraph, the layout is required, but it is not required for Graph;
  • TreeGaph layouts does not support being instantiated and used independently;
  • You can not custom a new type of TreeGraph Layout by G6.registerLayout.

Notice that the layouts for TreeGraph cannot be used on Graph.

There are four built-in layouts for TreeGraph:

Usage

const graph = new G6.TreeGraph({
  // ...                      // Other configurations
  layout: {                // Object,required for TreeGraph
    type: 'dendrogram',
    ...                    // Other configurations for the layout
  }
});

Common Configurations

NameTypeRequiredDescription
typeStringdendrogramThe type of layout. Options: 'dendrogram', 'compactBox', 'mindmap', and 'indeted'.
directionStringLRThe direction of layout. Options: 'LR' , 'RL' , 'TB' , 'BT' , 'H' , and 'V'.
L: Left; R: right; T: top; B: bottom; H: horizontal; V: vertical.
getChildrenFunctionReturn all the children nodes of the current node.
⚠️Attention: Whentype='indeted', direction can only be 'LR', 'RL', and 'H'.