logoCreated with Sketch.

G6

TreeGraph

8 min read

If you are going to visualize a tree, TreeGraph of G6 is more appropriate than Graph. The main differences between G6.TreeGraph and G6.Graph are data structure and built-in layout algorithms:

  • Data structure: In G6, the tree data has nested structure. Edges are implicit in it. Each node data has id and children properties at least:
const data = {
  id: 'root',
  children: [
    {
      id: 'subTree1',
      children: [...]
    }, 
    {
      id: 'subTree2',
      children: [...]           
    }
  ]
};

  • Tree layout algorithms:

    • Tree layout algorithms do not modify the source data. it generates a new data instead. And the source data will be a property of the new data. This mechanism will reduce the complexity of transformation from nested data to nodes and edges in graph.
    • The layout will be re-calculated after adding / deleting / expanding / collapsing nodes on the tree.

Initialize

G6.TreeGraph

Configurations

Name Type Required Description
layout Object null V3.0.4 supports configurations for TreeGraph layout. Before V3.0.4, the layout is formatted as a function. We recommend developers to use configurations now.
animate Boolean true Whether to activate animation for relayout.

Usage

const treeGraph = new G6.TreeGraph({
  container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: [
      {
        type: 'collapse-expand',
        onChange(item, collapsed) {
          const icon = item.get('group').findByClassName('collapse-icon');
          if (collapsed) {
            icon.attr('symbol', EXPAND_ICON);
          } else {
            icon.attr('symbol', COLLAPSE_ICON);
          }
        },
      },
      'drag-canvas',
      'zoom-canvas',
    ],
  },
  layout: {
    type: 'dendrogram',
    direction: 'LR', // H / V / LR / RL / TB / BT
    nodeSep: 50,
    rankSep: 100,
    radial: true,
  },
});

Configurations of Layout

There are four layout algorithms for tree in G6: dendrogram, compactBox, mindmap, and indeted.

Common Configurations

Name Type Required Description
type String dendrogram The type of layout. Options: 'dendrogram', 'compactBox', 'mindmap', and 'indeted'.
direction String LR The direction of layout. Options: 'LR' , 'RL' , 'TB' , 'BT' , 'H' , and 'V'.
L: Left; R: right; T: top; B: bottom; H: horizontal; V: vertical.
getChildren Function Return all the children nodes of the current node.

⚠️Attention: Whentype='indeted', direction can only be 'LR', 'RL', and 'H'.

dendrogram

dendrogram Sketch

Different results with different direction values.

LR RL H
TB BT V

Configurations of dendrogram

Name Type Required Description
nodeSep Number 20 The separation between nodes in the same level.
rankSep Number 200 The separation between nodes in adjacent levels.
nodeSize Number 20 The node size.
subTreeSep Number 10 The separation between sub trees.
isHorizontal Boolean true Whether to layout the tree in horizontal.

compactBox

compactBox Sketch

Different effects for different direction values.

LR RL H
TB BT V

compactBox Configurations

Name Type Required Description
getId Function Set the id for nodes.
getHeight Function 36 Set the heights of nodes.
getWidth Function 18 Set the widths of nodes.
getVGap Function 18 Set the vertical separations between nodes.
getHGap Function 18 Set the horizontal separations between nodes.

⚠️Attention: getWidth, getHeight, getVGap, and getHGap will not change the node size:

/*
 * Gaps: filling space between nodes
 * (x, y) ----------------------
 * |            vgap            |
 * |    --------------------    h
 * | h |                    |   e
 * | g |                    |   i
 * | a |                    |   g
 * | p |                    |   h
 * |   ---------------------    t
 * |                            |
 *  -----------width------------
 */

🦁It is the same for indented and mindmap.

indented

indented Sketch

Different results with different direction values.

LR RL H

Configurations of indented

Name Type Required Description
indent Number 20 The indent to parrent node.
getVGap Function 18 Set the vertical sparations between nodes.
getHeight Function 36 Set the heights of nodes.

mindmap

mindmap Sketch

Configurations of mindmap

Name Type Required Description
getId Function Set the id of nodes.
getHeight Function 36 Set the heights of nodes.
getWidth Function 18 Set the widths of nodes.
getSide Function Specify the nodes to be layed on the left or the right of the root.
getSubTreeSep Function 0 Set the height separations between nodes.
getVGap Function 18 Set the vertical separations between nodes.
getHGap Function 18 Set the horizontal separations between nodes.

Update

addChild(data, parent)

Add sub tree to the parent node.

Parameters

Name Type Required Description
data Object true The data of subtree.
parent Node String true

Usage

const data = {
  id: 'sub1',
  children: [
    {
      id: 'subTree1',
      children: [...]
    }, 
    {
      id: 'subTree2',
      children: [...]           
    }
  ]
};

treeGraph.addChild(data, 'root')

updateChild(data, parent)

Incrementally update the children data of the parent.

Parameters

Name Type Required Description
data Object true The data of subtreee.
parent Node String false

⚠️Attention: When the parent is null, this operation will update the graph fully.

Usage

const data = {
  id: 'sub1',
  children: [
    {
      id: 'subTree1',
      children: [...]
    }, 
    {
      id: 'subTree2',
      children: [...]           
    }
  ]
};

treeGraph.updateChild(data, 'root')

removeChild(id)

Remove the subtree started from a child node with the id.

Parameters

Name Type Required Description
id String true The id of the subtree to be removed.

Usage

treeGraph.removeChild('sub');

Layout

changeLayout(layout)

Change the layout.

Parameters

Name Type Required Description
layout Object false The new layout configurations. If the layout is null, the layout will not be changed.

Usage

const layout = {
  type: 'mindmap',
  dirction: 'H',
  getSubTreeSep: () => 20,
  getVGap: () => 25,
  getHeight: () => 30,
  getWidth: () => 30,
};
treeGraph.changeLayout(layout);

refreshLayout(fitView)

Refresh the layout. Usually, it is called after changing data.

Parameters

Name Type Required Description
fitView Boolean false Whether to fit view after refreshing layout.

Usage

treeGraph.refreshLayout(true);

findDataById(id, target)

Find data model according to the id.

Parameters

Name Type Required Description
id String true The id of the item.
target Object false Search from the target. If the target is null, this operation will search from the root node.

Return

  • The type of return value: Object;
  • The return value is the data model of the found node.

Usage

const target = {
	id: 'sub1',
  children: [...]
}

// Search the node with id 'sub1.1' from target
const subData = treeGraph.findDataById('sub1.1', target)
  
// Search the node with id 'sub1.1' from root node
const subData = treeGraph.findDataById('sub1.1')