FlowDirectionGraph 流向图

用于直观展示流动路径和量值变化。

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

何时使用

适用于信息繁杂、需要明确逻辑关系或决策支持时，能直观、清晰地展示数据流向和关系，提升理解和决策效率。

代码演示

基本用法

简单的展示。

通过配置 map-edge-line-width 交互来动态调整边的描边宽度 edge.style.lineWidth 。具体可参考 MapEdgeLineWidthOptions 获取详细配置说明。

高亮相邻元素

通过添加悬浮高亮交互（注册类型：hover-activate-neighbors）可以高亮当前元素及其相邻元素。此交互基于 G6 内置交互 hover-activate 实现。具体可参考 HoverActivateNeighborsOptions 获取详细配置说明。

高亮元素及其所在链路

通过添加悬浮高亮交互（注册类型：hover-activate-chain）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 hover-activate 实现。具体可参考 HoverActivateChainOptions 获取详细配置说明。

自定义

API

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

FlowDirectionGraph

属性	说明	类型	默认值
data	数据	Data	-
labelField	指定节点标签内容 - 从数据中选择一个字段，对应字段的值作为节点的标签 - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签	string \| ((node: NodeData) => string)	节点 ID
layout	Dagre 布局配置	Layout	-

Data

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

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

Layout

Dagre 层次布局。配置如下：

也可以参考 Dagre Wiki

属性	说明	类型	默认值
rankdir	节点排列方向。可以是 `TB`、`BT`、`LR` 或 `RL`，其中 T = 上，B = 下，L = 左，R = 右	string	`TB`
align	节点排列对齐方式。可以是 `UL`、`UR`、`DL` 或 `DR`，其中 U = 上，D = 下，L = 左，R = 右	string	`undefined`
nodesep	布局中节点水平间隔的像素数	number	`50`
edgesep	布局中边水平间隔的像素数	number	`10`
ranksep	布局中每个等级之间的像素数	number	`50`
marginx	图表左右两侧的边距像素数	number	`0`
marginy	图表上下两侧的边距像素数	number	`0`
acyclicer	如果设置为 greedy，则使用贪婪启发式算法来找到图的反馈弧集。反馈弧集是可以移除以使图无环的边集	string	`undefined`
ranker	为输入图中的每个节点分配等级的算法类型。可能的值：`network-simplex`、`tight-tree` 或 `longest-path`	string	`network-simplex`