@ant-design/graphs 是基于 G6 精心打造的 React 组件库，旨在为开发者提供一套直接可用于业务的 “一图一做” 封装，同时保持 G6 能力同步，让关系图集成变得更加简单、高效。

如何理解 “一图一做”？

“一图” 指的是特定业务场景（如思维导图、组织结构图、流程图等）量身定制的图组件，“一做” 则强调了这种封装是即拿即用的，用户不再需要从零开始搭建，只需根据业务场景选择对应的图组件，并可能通过简单的配置调整即可满足需求。

但对于需要深度定制化的复杂场景，推荐使用 G6 直接开发，充分利用其底层强大的功能与灵活性。

术语定义

在深入了解关系图用法之前，我们需要了解以下术语：

• graph：图的统一入口，由节点（代表实体）和边（代表实体间的关系）构成的复杂网络结构。
• data：数据是图表的核心，图表的展示和交互都是基于数据驱动的。
• element：作为基本构成单元，包括节点(Node)、边(Edge)、组合(Combo)。
• layout：布局，将图中的元素按照一定的规则进行排列。
• behavior：交互，用户与画布、元素之间的一系列行为操作，例如拖拽、缩放、平移、选中等。
• plugin：插件，用于扩展能力，例如在画布中额外挂载图形组件、实现撤销重做等功能。
• transform：数据转换，对用户输入数据进行处理，最终会影响渲染数据，但用户输入数据不受污染。

图通用属性

Tips: 以下通用属性适用于 Graphs 组件，不支持的组件会单独说明。

容器属性

画布属性

生命周期属性

定义在图的不同生命周期阶段执行特定的回调。

交互 Behavior

交互（Behaviors）指的是用户与画布及元素间的一系列操作，如拖拽、缩放、平移和选择等。这些交互方式增强了用户从图表中获取信息的直观性。

类型定义：BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])

默认情况下，zoom-canvas（缩放画布）和 drag-canvas（拖拽画布）交互是开启的。若需其他交互方式，则需进行额外配置。

Behavior 可定义为静态数组或动态函数：

• 静态数组：直接声明所有需要的交互方式。
• （👍 推荐） 动态函数：基于现有交互数组，动态添加或调整。

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

export default () => {
  // 静态数组形式
  const behaviors = ['zoom-canvas', { type: 'drag-canvas', direction: 'x' }];

  // 动态函数形式
  const dynamicBehaviors = (existingBehaviors) => {
    // console.log(existingBehaviors); 👉 [{ key: 'zoom-canvas', type: 'zoom-canvas' }, { key: 'drag-canvas', type: 'drag-canvas' }]
    return [...existingBehaviors, { type: 'click-select' /* 参数 */ }];
  };

  return <MindMap behaviors={behaviors /** or dynamicBehaviors **/} />;
};

支持 G6 提供的所有交互。以下是部分内置交互的简介，详情可参考 G6 - 核心概念 - 交互：

• Brush Select：框选
• Click Element：单击选中
• Collapse Expand：展开收起
• Create Edge：创建边
• Drag Canvas：拖拽画布
• Drag Element：拖拽元素
• Focus Element：聚焦元素
• Hover Element：悬停元素
• Lasso Select：套索选择
• Zoom Canvas：缩放画布

若内置交互无法满足特定需求，还可根据 G6 - 自定义交互 教程来自定义交互。

此外，Graphs 也提供了一系列交互。

HoverActivateChain

用途： 当用户将鼠标悬停在一个节点或边上时，高亮该节点或边以及其直接关联的链路（上下游路径）。该交互常用于突出显示网络结构中的路径，帮助用户快速分析链路关系。

配置项： 同 G6 - Behavior - HoverActivate 配置项。

HoverActivateNeighbors

用途： 鼠标悬停时，高亮与当前节点或边直接邻接的元素，帮助用户快速理解元素的局部上下文。

配置项： 同 G6 - Behavior - HoverActivate 配置项。

数据处理 Transform

数据处理 (Transforms) 用于对用户输入数据进行处理。这种转换只会影响渲染数据，原始输入数据始终保持不变。

类型定义：TransformOptions[] | (existingTransforms: TransformOptions[]) => TransformOptions[]

Transform 可定义为静态数组或动态函数：

• 静态数组：明确列出所有需要的转换器。
• （👍 推荐） 动态函数：基于现有转换器数组，动态生成新的转换器数组。

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

export default () => {
  // 静态数组形式
  const transforms = [{ type: 'assign-color-by-branch' /* 参数 */ }, { type: 'map-edge-line-width' /* 参数 */ }];

  // 动态函数形式
  const dynamicTransforms = (existingTransforms) => {
    return [...existingTransforms, { type: 'arrange-edge-z-index' /* 参数 */ }];
  };

  return <MindMap transforms={transforms /** or dynamicTransforms**/} />;
};

支持 G6 提供的所有数据处理。内置数据处理列表请查看 G6 - API - 数据转换。

另外，Graphs 也提供了一系列数据处理。

TranslateReactNodeOrigin

用途： 由于 React Node 默认原点位于左上角，与布局预期不符。通过调整偏移量 dx 和 dy，将原点设置为节点中心。

CollapseExpandReactNode

用途： 用于实现 React 节点的子节点展开和收起功能。仅对 React 节点类型有效。通过为节点绑定副作用，控制其“展开/收起”行为。

配置项：

AssignColorByBranch

用途： 为树图中的分支分配颜色，有助于在逻辑分支或层级结构中增强视觉区分。

配置项：

ArrangeEdgeZIndex

用途： 调整边的 z-index 以优化渲染层次，避免边缘被遮挡或不清晰。常用于树图场景，配合 assign-color-by-branch使用。

MapEdgeLineWidth

用途： 根据边的属性（如权重）动态调整其线宽，使图形信息表达更直观。

配置项：

插件 Plugin

插件 (Plugin) 用于处理画布的渲染逻辑、额外组件渲染，例如在画布中额外挂载图形组件、实现撤销重做等功能。

类型定义：PluginOptions[] | ((existingPlugins: PluginOptions[]) => PluginOptions[])

Plugin 可定义为静态数组或动态函数：

• 静态数组：明确列出所有需要的插件。
• （👍 推荐） 动态函数：基于现有插件，动态新增或调整。

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

export default () => {
  // 静态数组形式
  const plugins = [{ type: 'minimap' /* 参数 */ }];

  // 动态函数形式
  const dynamicTransforms = (existingPlugins) => {
    // console.log(existingPlugins); 👉 []
    return [...existingPlugins, { type: 'minimap' /* 参数 */ }];
  };

  return <MindMap plugins={plugins /** or existingPlugins**/} />;
};

支持 G6 的所有内置插件。内置插件列表请参考 G6 - API - 插件。