Indented Tree Layout

Overview

Indented tree layout represents the hierarchy of tree nodes through indentation in the horizontal direction. Each element occupies a row or column, commonly used in file directory structures, organizational charts, and other scenarios. This layout provides a clear structure for displaying hierarchical relationships.

Use Cases

• File directory structure visualization
• Organizational charts
• Classification system display
• Tree-like data where hierarchical relationships need to be emphasized

Configuration Items

IndentedLayout supports common layout configuration items and specific configuration items, as shown below.

Complex Type Explanations

• direction

  • 'LR': Root node on the left, layout to the right
  • 'RL': Root node on the right, layout to the left
  • 'H': Root node in the middle, horizontal symmetric layout

• indent

  • Fixed value: Consistent indentation for all levels
  • Function: (d?: Node) => number, customize indentation based on node
  • Example:

    (d) => {
      if (d.parent?.id === 'testId') return d.parent.x + 50;
      return 100;
    };

• getWidth/getHeight

  • Used to customize each node's width/height, often for content adaptation
  • Example:

    (d) => (d.id === 'testId' ? 50 : 100);

• getSide

  • Specifies which side of the root node a node should be placed, only effective when direction='H'
  • Example:

    (d) => (d.id === 'testId' ? 'left' : 'right');

Example Code

For more examples, see Online Demo

Automatic Child Node Distribution

import { Graph, treeToGraphData } from '@antv/g6';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data: treeToGraphData(data),
      autoFit: 'view',
      layout: {
        type: 'indented',
        direction: 'H',
        indent: 80,
        getHeight: () => 16,
        getWidth: () => 32,
      },
    });
    graph.render();
  });

Right Side Child Node Distribution

// ... code as above, layout.direction: 'LR'

Left Side Child Node Distribution

// ... code as above, layout.direction: 'RL'

Custom Child Node Distribution

layout: {
  type: 'indented',
  direction: 'H',
  indent: 80,
  getHeight: () => 16,
  getWidth: () => 32,
  getSide: (d) => {
    if (d.id === 'Regression' || d.id === 'Classification') return 'left';
    return 'right';
  },
}

No Line Break for First Child Node

layout: {
  type: 'indented',
  direction: 'LR',
  indent: 80,
  getHeight: () => 16,
  getWidth: () => 32,
  dropCap: false,
}