Dendrogram 生态树图

将事物或现象分解成树枝状结构，来系统地展示其构成关系或内在逻辑关系。

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

何时使用

适用于展示数据的层级关系、明确问题的重点、寻求达成目标的合理步骤。

代码演示

基本用法

简单的展示。

排布方向

通过设置语法糖 direction 为 vertical radial 分别让子节点垂直、径向分布。若不设置 direction，则默认 horizontal 水平分布。注意，节点标签也会自动根据 direction 排布，当设置 node.style.labelPlacement 时会以后者为准。

紧凑模式

通过 compact 配置紧凑模式。

展开/收起节点

通过配置 G6 内置 CollapseExpand 交互 (collapse-expand)，双击触发展开/收起。具体可参考 CollapseExpandOptions 获取详细配置说明。

API

通用配置参考：图通用属性

Dendrogram

属性	说明	类型	默认值
data	数据	Data	-
labelField	指定节点标签内容 - 从数据中选择一个字段，对应字段的值作为节点的标签 - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签	string \| ((node: NodeData) => string)	节点 ID
direction	语法糖，设置树图节点的排布方向。当设置 layout.direction 时会以后者为准	`vertical` \| `horizontal` \| `radial`	`horizontal`
compact	是否为紧凑模式	boolean	false
defaultExpandLevel	默认展开层级，若不指定，将展开全部	number	-
layout	生态树布局配置	Layout	-

Data

支持两种数据格式：

（👍 推荐） 树图数据

类型定义：

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

例如：

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

图数据。若开启“展开-收起”交互，需确保数据中包含 children 字段。

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

生态树布局，可配置的参数如下：

属性	说明	类型	默认值
type	布局类型	string	`dendrogram`
direction	布局方向	`LR` \| `RL` \| `TB` \| `BT` \| `H` \| `V`	`RL`
nodeSep	节点间距	number	40
rankSep	层与层之间的间距	number	200
radial	是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 `LR` 或 `RL`