Dendrogram

A dendrogram breaks down items or phenomena into a tree-like structure to systematically display their composition or internal logic.

import { Dendrogram } from '@ant-design/graphs';

When to Use

It is suitable for displaying hierarchical data relationships, clarifying key points of an issue, and outlining logical steps to achieve a goal.

Examples

API

For general graph properties, refer to: General Graph Properties

Dendrogram

Property	Description	Type	Default Value
data	The dataset	Data	-
labelField	Specifies the node label content - Select a field from the data, and the corresponding field value will be used as the node label - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label	string \| ((node: NodeData) => string)	Node ID
direction	Syntactic sugar for setting the arrangement direction of tree nodes. When `layout.direction` is set, it will take precedence	`vertical` \| `horizontal` \| `radial`	`horizontal`
compact	Whether to enable compact mode	boolean	false
defaultExpandLevel	The default expansion level; if not specified, all levels will be expanded	number	-
layout	Configuration for the dendrogram layout	Layout	-

Data

Two data formats are supported:

(👍 Recommended) Tree data

Type Definition:

type TreeData = {
  id: string;
  children?: TreeData[];
  [key: string]: unknown;
};

Example:

const data = {
  id: 'root',
  children: [
    {
      id: 'Child 1',
      value: 10,
      children: [
        { id: 'Sub 1-1', value: 5 },
        { id: 'Sub 1-2', value: 5 },
      ],
    },
    {
      id: 'Child 2',
      value: 20,
      children: [
        { id: 'Sub 2-1', value: 10 },
        { id: 'Sub 2-2', value: 10 },
      ],
    },
  ],
};

Graph data. If the expand-collapse behavior is enabled, make sure the children field is included in the data.

const graphData = {
  nodes: [
    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
    { id: '3', data: { label: 'Node 3' } },
    { id: '4', data: { label: 'Node 4' } },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

Dendrogram layout properties are as follows:

Property	Description	Type	Default Value
type	Layout type	string	`dendrogram`
direction	Layout direction	`LR` \| `RL` \| `TB` \| `BT` \| `H` \| `V`	`RL`
nodeSep	Node separation	number	40
rankSep	Separation between layers	number	200
radial	Whether to arrange nodes in a radial layout. If `radial` is true, it is recommended to set `direction` to `LR` or `RL`

Ant Design Charts

Dendrogram

When to Use

Examples

API

Dendrogram

Data

Layout

Basic Usage

Arrangement Direction

Compact Mode

Expand/Collapse Nodes