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.

Property	Description	Type	Default	Required
type	Layout type, must be 'indented'	'indented'	-	✓
direction	Layout direction, see details below	'LR' \| 'RL' \| 'H'	'LR'
indent	Column spacing, fixed value or function	number \| (d?: Node) => number	20
getWidth	Get each node's width, effective when direction='H'	(d?: Node) => number	-
getHeight	Get each node's height	(d?: Node) => number	-
getSide	Node placement on left/right side of root, overrides direction='H'	(d?: Node) => 'left' \| 'right'	-
dropCap	Whether the first child of each node starts on the next line	boolean	true
isLayoutInvisibleNodes	Whether invisible nodes participate in layout (when preLayout=true)	boolean	false
nodeFilter	Nodes participating in this layout	(node: NodeData) => boolean	() => true
preLayout	Use pre-layout, calculate layout before initializing elements	boolean	false
enableWorker	Whether to run layout in WebWorker	boolean	-
iterations	Number of iterations for iterative layout	number	-

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,
}