From 33ea2bb276800988290abd6451a987d58767ea95 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Wed, 23 Oct 2024 14:34:10 +0800 Subject: [PATCH 1/2] refactor: update hyperlinks --- site/docs/options/graphs/dendrogram.zh.md | 10 ++++----- .../options/graphs/flow-direction-graph.zh.md | 8 +++---- site/docs/options/graphs/flow-graph.zh.md | 8 +++---- site/docs/options/graphs/indented-tree.zh.md | 8 +++---- site/docs/options/graphs/mind-map.zh.md | 8 +++---- site/docs/options/graphs/network-graph.zh.md | 14 +++++++----- .../options/graphs/organization-chart.zh.md | 8 +++---- site/docs/options/graphs/overview.zh.md | 22 +++++++++---------- 8 files changed, 45 insertions(+), 41 deletions(-) diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md index 7518833f7..748a0f3a8 100644 --- a/site/docs/options/graphs/dendrogram.zh.md +++ b/site/docs/options/graphs/dendrogram.zh.md @@ -21,7 +21,7 @@ import { Dendrogram } from '@ant-design/graphs'; 紧凑模式 -展开/收起节点 +展开/收起节点 ## API @@ -33,7 +33,7 @@ import { Dendrogram } from '@ant-design/graphs'; | --- | --- | --- | --- | | direction | 语法糖，设置树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` | | compact | 是否为紧凑模式 | `boolean` | `false` | -| layout | 树图布局配置 | [DendrogramLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | 树图布局配置 | [DendrogramLayoutOptions](https://g6.antv.antgroup.com/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/flow-direction-graph.zh.md b/site/docs/options/graphs/flow-direction-graph.zh.md index 468accdbf..7018247d8 100644 --- a/site/docs/options/graphs/flow-direction-graph.zh.md +++ b/site/docs/options/graphs/flow-direction-graph.zh.md @@ -23,7 +23,7 @@ import { FlowDirectionGraph } from '@ant-design/graphs'; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/flow-graph.zh.md b/site/docs/options/graphs/flow-graph.zh.md index 21b840e83..9c9cc5a54 100644 --- a/site/docs/options/graphs/flow-graph.zh.md +++ b/site/docs/options/graphs/flow-graph.zh.md @@ -31,7 +31,7 @@ import { FlowGraph } from '@ant-design/graphs'; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md index 4cbda24c3..25b3f71e9 100644 --- a/site/docs/options/graphs/indented-tree.zh.md +++ b/site/docs/options/graphs/indented-tree.zh.md @@ -44,7 +44,7 @@ import { IndentedTree } from '@ant-design/graphs'; | direction | 语法糖，设置缩进树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'right'` | | nodeMinWidth | 缩进树图节点的最小宽度 | `number` | `0` | | nodeMaxWidth | 缩进树图节点的最大宽度 | `number` | `300` | -| layout | 缩进树布局配置 | [IndentedLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/indented-layout) | `{ type: 'indented' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | 缩进树布局配置 | [IndentedLayoutOptions](https://g6.antv.antgroup.com/api/layouts/indented-layout) | `{ type: 'indented' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md index ad8c0d898..5e744f71b 100644 --- a/site/docs/options/graphs/mind-map.zh.md +++ b/site/docs/options/graphs/mind-map.zh.md @@ -41,7 +41,7 @@ import { MindMap } from '@ant-design/graphs'; | direction | 语法糖，设置思维导图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` | | nodeMinWidth | 思维导图节点的最小宽度 | `number` | `0` (`default` 类型)
`120` (`boxed` 类型) | | nodeMaxWidth | 思维导图节点的最大宽度 | `number` | `300` | -| layout | 思维导图布局配置 | [MindmapLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | 思维导图布局配置 | [MindmapLayoutOptions](https://g6.antv.antgroup.com/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/network-graph.zh.md b/site/docs/options/graphs/network-graph.zh.md index 385b1aab3..d0f64967e 100644 --- a/site/docs/options/graphs/network-graph.zh.md +++ b/site/docs/options/graphs/network-graph.zh.md @@ -5,6 +5,10 @@ order: 7 展示一系列节点（如实体、对象或概念）以及它们之间的连接或关系。 +```js +import { NetworkGraph } from '@ant-design/graphs'; +``` + ## 何时使用 当需要展示复杂网络结构中的节点及其相互关系时，直观地揭示连接模式和数据流动。 @@ -15,7 +19,7 @@ order: 7 节点标签 -节点重要性 +节点重要性 ## API @@ -23,7 +27,7 @@ order: 7 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| layout | D3 Force 布局配置 | [D3ForceLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | D3 Force 布局配置 | [D3ForceLayoutOptions](https://g6.antv.antgroup.com/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/organization-chart.zh.md b/site/docs/options/graphs/organization-chart.zh.md index 9d38b88a5..00fb707d3 100644 --- a/site/docs/options/graphs/organization-chart.zh.md +++ b/site/docs/options/graphs/organization-chart.zh.md @@ -39,7 +39,7 @@ import { OrganizationChart } from '@ant-design/graphs'; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | direction | 语法糖，设置节点的排布方向。当设置 `layout.rankdir` 时会以后者为准 | `'vertical'` \| `'horizontal'` | `'vertical'` | -| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | +| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/overview.zh.md b/site/docs/options/graphs/overview.zh.md index 415970a21..43dd33b0a 100644 --- a/site/docs/options/graphs/overview.zh.md +++ b/site/docs/options/graphs/overview.zh.md @@ -3,7 +3,7 @@ title: 总览 order: 0 --- -`@ant-design/graphs` 是基于 [G6](https://g6-next.antv.antgroup.com/manual/introduction) 精心打造的 React 组件库，旨在为开发者提供一套直接可用于业务的 “一图一做” 封装，同时保持 G6 能力同步，让关系图集成变得更加简单、高效。 +`@ant-design/graphs` 是基于 [G6](https://g6.antv.antgroup.com/manual/introduction) 精心打造的 React 组件库，旨在为开发者提供一套直接可用于业务的 “一图一做” 封装，同时保持 G6 能力同步，让关系图集成变得更加简单、高效。 > 该库提供的图组件会在内部维护一套默认配置，能够满足大多数常见场景的需求。用户可以通过自定义传参轻松修改这些配置，来优化渲染效果，贴合特定业务需求。然而，针对需深度定制的复杂场景，推荐使用 G6 直接开发，充分利用其底层强大的功能与灵活性。 @@ -25,19 +25,19 @@ order: 0 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| autoFit | 是否自动适应 | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6-next.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming)`; }`
\| `{ type: 'center'; animation?: ViewportAnimationEffectTiming; }`
\| `'view'` \| `'center'` | - | -| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置 | `boolean` \| [`AnimationEffectTiming`](https://g6-next.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - | +| autoFit | 是否自动适应 | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6.antv.antgroup.com/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming)`; }`
\| `{ type: 'center'; animation?: ViewportAnimationEffectTiming; }`
\| `'view'` \| `'center'` | - | +| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置 | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - | | autoResize | 是否自动调整画布大小 | `boolean` | `false` | | background | 画布背景色 | `string` | - | -| combo | Combo，支持 G6 内置 Combo，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/elements/combos/base-combo) | [`ComboOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/combooptions) | - | +| combo | Combo，支持 G6 内置 Combo，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/elements/combos/base-combo) | [`ComboOptions`](https://g6.antv.antgroup.com/api/reference/g6/combooptions) | - | | container | 画布容器 | `string` \| `HTMLElement` \| `Canvas` | - | | cursor | 指针样式 | `Cursor` | - | -| data | 数据 | [GraphData](https://g6-next.antv.antgroup.com/api/reference/g6/graphdata) | - | +| data | 数据 | [GraphData](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - | | devicePixelRatio | 设备像素比 | `number` | - | -| edge | 边，支持 G6 内置边，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/elements/edges/base-edge) | [`EdgeOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/edgeoptions) | - | +| edge | 边，支持 G6 内置边，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/elements/edges/base-edge) | [`EdgeOptions`](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - | | height | 画布高度 | `number` | - | -| layout | 布局，支持 G6 内置布局，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `LayoutOptions` \| `LayoutOptions[]` | - | -| node | 节点，支持 G6 内置节点，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/elements/nodes/base-node)。 | [`NodeOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/nodeoptions) | - | +| layout | 布局，支持 G6 内置布局，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `LayoutOptions` \| `LayoutOptions[]` | - | +| node | 节点，支持 G6 内置节点，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/elements/nodes/base-node)。 | [`NodeOptions`](https://g6.antv.antgroup.com/api/reference/g6/nodeoptions) | - | | padding | 画布内边距，通常在自适应时，会根据内边距进行适配 | `number` \| `number[]` | - | | renderer | 获取渲染器 | `(layer: 'background' \| 'main' \| 'label' \| 'transient') => IRenderer` | - | | rotation | 旋转角度 | `number` | `0` | @@ -47,9 +47,9 @@ order: 0 | y | 视口 y 坐标 | `number` | - | | zoom | 缩放比例 | `number` | `1` | | zoomRange | 缩放范围 | `[number, number]` | `[0.01, 10]` | -| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | 组件中查看 | -| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | -| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | 组件中查看 | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | 组件中查看 | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | 组件中查看 | | onDestroy | 当图销毁后（即 `graph.destroy()` 之后）执行回调 | `() => void` | - | | onInit | 当图初始化完成后（即 `new Graph()` 之后）执行回调 | `(graph: Graph) => void` | - | | onReady | 当图渲染完成后（即 `graph.render()` 之后）执行回调 | `(graph: Graph) => void` | - | From c0be5ae100a0a2159b50b4357647b1468db66918 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Wed, 23 Oct 2024 15:25:36 +0800 Subject: [PATCH 2/2] docs: add english documentations --- site/docs/options/general-properties.en.md | 14 +++ site/docs/options/graphs/dendrogram.en.md | 39 +++++++ .../options/graphs/flow-direction-graph.en.md | 29 +++++ site/docs/options/graphs/flow-graph.en.md | 37 +++++++ site/docs/options/graphs/indented-tree.en.md | 50 +++++++++ site/docs/options/graphs/mind-map.en.md | 47 ++++++++ site/docs/options/graphs/network-graph.en.md | 33 ++++++ .../options/graphs/organization-chart.en.md | 45 ++++++++ site/docs/options/graphs/overview.en.md | 104 ++++++++++++++++++ 9 files changed, 398 insertions(+) create mode 100644 site/docs/options/general-properties.en.md create mode 100644 site/docs/options/graphs/dendrogram.en.md create mode 100644 site/docs/options/graphs/flow-direction-graph.en.md create mode 100644 site/docs/options/graphs/flow-graph.en.md create mode 100644 site/docs/options/graphs/indented-tree.en.md create mode 100644 site/docs/options/graphs/mind-map.en.md create mode 100644 site/docs/options/graphs/network-graph.en.md create mode 100644 site/docs/options/graphs/organization-chart.en.md create mode 100644 site/docs/options/graphs/overview.en.md diff --git a/site/docs/options/general-properties.en.md b/site/docs/options/general-properties.en.md new file mode 100644 index 000000000..310565a80 --- /dev/null +++ b/site/docs/options/general-properties.en.md @@ -0,0 +1,14 @@ +--- +title: General Properties +--- + +> Tips: The following general properties apply to chart components. Components that do not support these properties will be specifically noted. + +| Parameter | Description | Type | Default | +| ------------------- | ----------------------------------------------------------- | ------------------------------- | ------- | +| containerStyle | Configures the style of the chart container, accepts an object with CSS properties and values | `React.CSSProperties` | - | +| containerAttributes | Adds custom HTML attributes to the chart container | `Record` | - | +| className | Adds a className to the outermost component wrapper | `string` | - | +| loading | Indicates whether the chart is in a loading state | `boolean` | `false` | +| loadingTemplate | Custom loading template, the element displayed when the chart is loading | `React.ReactElement` | - | +| errorTemplate | Custom error template, a function that returns the error information to display when the chart encounters an error | `(e: Error) => React.ReactNode` | - | diff --git a/site/docs/options/graphs/dendrogram.en.md b/site/docs/options/graphs/dendrogram.en.md new file mode 100644 index 000000000..374503081 --- /dev/null +++ b/site/docs/options/graphs/dendrogram.en.md @@ -0,0 +1,39 @@ +--- +title: Dendrogram +order: 3 +--- + +A dendrogram breaks down items or phenomena into a tree-like structure to systematically display their composition or internal logic. + +```js +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. + +## Code Examples + +Basic Usage + +Arrangement Direction + +Compact Mode + +Expand/Collapse Nodes + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +### Dendrogram + +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| direction | Syntax sugar to set the arrangement direction of tree nodes. When `layout.direction` is set, it takes precedence. | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` | +| compact | Whether to enable compact mode | `boolean` | `false` | +| layout | Tree layout configuration | [DendrogramLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` | +| behaviors | Set user interaction events. Also supports G6 built-in interactions. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins for rendering logic and additional components. Also supports G6 built-in plugins. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to handle user input and convert it into internal data flows. Also supports G6 built-in data transformers. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/flow-direction-graph.en.md b/site/docs/options/graphs/flow-direction-graph.en.md new file mode 100644 index 000000000..a283738b9 --- /dev/null +++ b/site/docs/options/graphs/flow-direction-graph.en.md @@ -0,0 +1,29 @@ +--- +title: Flow Direction Graph +order: 6 +--- + +Used to visually display flow paths and value changes. + +```js +import { FlowDirectionGraph } from '@ant-design/graphs'; +``` + +## When to Use + +Ideal for complex information that requires clear logical relationships or decision support. It visually and clearly shows data flow and relationships, improving understanding and decision-making efficiency. + +## Code Examples + +Basic Usage + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| layout | AntV Dagre layout configuration | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/flow-graph.en.md b/site/docs/options/graphs/flow-graph.en.md new file mode 100644 index 000000000..1ad802ed5 --- /dev/null +++ b/site/docs/options/graphs/flow-graph.en.md @@ -0,0 +1,37 @@ +--- +title: Flow Graph +order: 5 +--- + +Used to visually represent the steps and decision points of a process or system. + +```js +import { FlowGraph } from '@ant-design/graphs'; +``` + +## When to Use + +A flowchart shows the entire process from start to finish. Each node represents a specific step or decision point, and the edges indicate the sequence and relationships between steps. + +- Suitable for scenarios that require displaying linear processes or steps. +- Useful for planning and tracking project progress, clarifying task order and dependencies. +- Ideal for building decision trees, showing different decision points and paths. + +## Code Examples + +Basic Usage + +Highlight Elements and Their Chains + +Custom Nodes + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| layout | AntV Dagre layout configuration | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/indented-tree.en.md b/site/docs/options/graphs/indented-tree.en.md new file mode 100644 index 000000000..367162ab8 --- /dev/null +++ b/site/docs/options/graphs/indented-tree.en.md @@ -0,0 +1,50 @@ +--- +title: Indented Tree +order: 2 +--- + +An indented tree is used to represent hierarchical data, displaying parent-child relationships through indentation. + +```js +import { IndentedTree } from '@ant-design/graphs'; +``` + +## When to Use + +- **File Directory Structure**: Show hierarchy of directories and files in a file system. +- **Organizational Structure**: Display the hierarchy of a company or team, and department relationships. +- **Navigation Menus**: Show hierarchical navigation menus for websites or applications. +- **Category Hierarchy**: Represent hierarchical relationships in classification systems, such as product categories or article categories. + +## Code Examples + +Basic Usage + +Styles + +Child Node Distribution + +Custom Nodes + +Expand/Collapse Child Nodes + +Set Branch Colors + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +### IndentedTree + +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| type | Syntax sugar for setting the display style of the indented tree. When `node.component` is set, it takes precedence. | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | +| direction | Syntax sugar for setting the node arrangement direction. When `layout.direction` is set, it takes precedence. | `'left'` \| `'right'` \| `'alternate'` | `'right'` | +| nodeMinWidth | Minimum node width in the indented tree | `number` | `0` | +| nodeMaxWidth | Maximum node width in the indented tree | `number` | `300` | +| layout | Indented tree layout configuration | [IndentedLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/indented-layout) | `{ type: 'indented' }` | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/mind-map.en.md b/site/docs/options/graphs/mind-map.en.md new file mode 100644 index 000000000..4fc78c120 --- /dev/null +++ b/site/docs/options/graphs/mind-map.en.md @@ -0,0 +1,47 @@ +--- +title: Mind Map +order: 1 +--- + +A mind-mapping tool to help users organize and express their thoughts systematically. + +```js +import { MindMap } from '@ant-design/graphs'; +``` + +## When to Use + +When information is complex or requires clear logical relationships, organize it into a series of nodes and branches to simplify understanding. + +## Code Examples + +Basic Usage + +Styles + +Child Node Distribution + +Custom Nodes + +Collapse/Expand Child Nodes + +Set Branch Colors + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +### MindMap + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| type | Syntax sugar, sets the mind map's display style. If `node.component` is set, it takes precedence | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | +| direction | Syntax sugar, sets the layout direction of the mind map nodes. If `layout.direction` is set, it takes precedence | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` | +| nodeMinWidth | Minimum width of the mind map nodes | `number` | `0` (`default` type)
`120` (`boxed` type) | +| nodeMaxWidth | Maximum width of the mind map nodes | `number` | `300` | +| layout | Mind map layout configuration | [MindmapLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/network-graph.en.md b/site/docs/options/graphs/network-graph.en.md new file mode 100644 index 000000000..a1b65bdd6 --- /dev/null +++ b/site/docs/options/graphs/network-graph.en.md @@ -0,0 +1,33 @@ +--- +title: Network Graph +order: 7 +--- + +Displays a series of nodes (such as entities, objects, or concepts) and their connections or relationships. + +```js +import { NetworkGraph } from '@ant-design/graphs'; +``` + +## When to Use + +Use when you need to visualize nodes and their relationships in a complex network structure, revealing connection patterns and data flow intuitively. + +## Code Examples + +Basic Usage + +Node Labels + +Node Importance + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| layout | D3 Force layout configuration | [D3ForceLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/organization-chart.en.md b/site/docs/options/graphs/organization-chart.en.md new file mode 100644 index 000000000..dc4cd1096 --- /dev/null +++ b/site/docs/options/graphs/organization-chart.en.md @@ -0,0 +1,45 @@ +--- +title: Organization Chart +order: 4 +demo: + cols: 3 +--- + +Visually displays the hierarchical structure and departmental relationships within an organization. + +```js +import { OrganizationChart } from '@ant-design/graphs'; +``` + +## When to Use + +- To show the hierarchical structure of a company or team, clarifying the relationships between positions and departments. +- To display the distribution of employees by position and department. +- For project management, clarifying team members and their responsibilities. +- For dependency analysis in scenarios like equity penetration and upstream/downstream company relationships. + +## Code Examples + +Basic Usage + +Node Layout + +Custom Nodes + +Collapse/Expand Child Nodes + +## API + +For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) + +### OrganizationChart + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| direction | Syntax sugar for node layout direction. Takes precedence over `layout.rankdir` if set | `'vertical'` \| `'horizontal'` | `'vertical'` | +| layout | AntV Dagre layout configuration | [AntVDagreLayoutOptions](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | Set canvas plugins to handle rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Configure data transformations to process user input and convert it into internal data flows. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/overview.en.md b/site/docs/options/graphs/overview.en.md new file mode 100644 index 000000000..83dfebc0c --- /dev/null +++ b/site/docs/options/graphs/overview.en.md @@ -0,0 +1,104 @@ +--- +title: Overview +order: 0 +--- + +`@ant-design/graphs` is a React component library meticulously built on top of [G6](https://g6.antv.antgroup.com/en/manual/introduction), designed to provide developers with an out-of-the-box solution for business applications with a "one graph, one action" approach, while maintaining feature parity with G6. This makes the integration of relational graphs simpler and more efficient. + +> The graph components provided by this library come with a set of default configurations that cater to most common use cases. Users can easily modify these configurations through custom parameters to optimize rendering and meet specific business needs. However, for highly customized and complex scenarios, it is recommended to use G6 directly to fully leverage its powerful underlying functionality and flexibility. + +## Overview of Graph Components + +| Application Scenario | Graph Component | Demo | Example | +| --- | --- | --- | --- | +| Mind Map | `MindMap` | ![mind-map](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-mind-map) | +| Dendrogram | `Dendrogram` | ![dendrogram](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-dendrogram) | +| Indented Tree | `IndentedTree` | ![indented-tree](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-indented-tree) | +| Organizational Chart | `OrganizationChart` | ![org-chart](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jgGCT7cMxg8AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-organization-chart) | +| Flowchart | `FlowGraph` | ![flow-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-flow-graph) | +| Flow Direction Graph | `FlowDirectionGraph` | ![flow-direction-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-flow-direction-graph) | +| Network Graph | `NetworkGraph` | ![network-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-network-graph) | + +## Common Graph Properties + +For general configuration reference: [General Properties](./general-properties.en.md) + +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| autoFit | Auto-fit settings | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming)`; }`
\| `{ type: 'center'; animation?: ViewportAnimationEffectTiming; }`
\| `'view'` \| `'center'` | - | +| animation | Enable or disable global animations. If set with animation config, it enables animation and uses the config as a base for global animations. | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming) | - | +| autoResize | Automatically adjust canvas size | `boolean` | `false` | +| background | Canvas background color | `string` | - | +| combo | Combo support, using G6 built-in Combo. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/elements/combos/base-combo) | [`ComboOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/combooptions) | - | +| container | Canvas container | `string` \| `HTMLElement` \| `Canvas` | - | +| cursor | Cursor style | `Cursor` | - | +| data | Graph data | [GraphData](https://g6.antv.antgroup.com/en/api/reference/g6/graphdata) | - | +| devicePixelRatio | Device pixel ratio | `number` | - | +| edge | Edge settings, using G6 built-in edges. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/elements/edges/base-edge) | [`EdgeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/edgeoptions) | - | +| height | Canvas height | `number` | - | +| layout | Layout settings, using G6 built-in layouts. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `LayoutOptions` \| `LayoutOptions[]` | - | +| node | Node settings, using G6 built-in nodes. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/elements/nodes/base-node) | [`NodeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/nodeoptions) | - | +| padding | Canvas padding, typically applied when auto-fitting based on padding | `number` \| `number[]` | - | +| renderer | Renderer accessor | `(layer: 'background' \| 'main' \| 'label' \| 'transient') => IRenderer` | - | +| rotation | Rotation angle | `number` | `0` | +| theme | Theme setting | `'light'` \| `'dark'` \| `string` | - | +| width | Canvas width | `number` | - | +| x | Viewport x-coordinate | `number` | - | +| y | Viewport y-coordinate | `number` | - | +| zoom | Zoom level | `number` | `1` | +| zoomRange | Zoom range | `[number, number]` | `[0.01, 10]` | +| behaviors | User interaction events, also supports G6 built-in behaviors. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | See component | +| plugins | Canvas plugins, handles rendering logic and additional component rendering. Also supports G6 built-in plugins. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | Data transformation settings, handling user input and converting it to internal data streams for processing. Also supports G6 built-in transformers. For more configuration details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | See component | +| onDestroy | Callback executed after graph destruction (`graph.destroy()`) | `() => void` | - | +| onInit | Callback executed after graph initialization (`new Graph()`) | `(graph: Graph) => void` | - | +| onReady | Callback executed after graph rendering (`graph.render()`) | `(graph: Graph) => void` | - | + +## Customization + +To meet diverse needs, users can extend the standard graph components to implement custom relationship graphs. + +#### Update Basic Configurations + +Except for interactions, plugins, and data transformations, all other graph configuration options can be directly customized. + +```js +import { MindMap } from '@ant-design/graphs'; + +export default () => { + const options = { + autoFit: 'view', + edge: { + style: { + lineWidth: 3, + }, + }, + }; + return ; +}; +``` + +#### Update Interactions/Plugins/Data Transformations + +> The following explanation on how to update plugins also applies to interactions and data transformations. + +When configuring plugins, special attention should be paid to how they are added. To ensure that new functionality can be added without affecting the existing default plugins, we introduce a 🔔 specific plugin update strategy. + +Specifically, this involves extending the existing plugin list through a higher-order function, rather than directly replacing it. This function accepts the current graph instance (`this: Graph`) and the existing plugin configuration (`plugins: PluginOptions`) as parameters, and returns a new array of plugin configurations. + +Here’s a concrete example showing how to add a mini-map plugin to a mind map: + +```js +import { MindMap } from '@ant-design/graphs'; + +export default () => { + const options = { + plugins: (existingPlugins) => [ + ...existingPlugins, // Retain all existing plugins + { type: 'minimap', key: 'minimap' }, // Add the mini-map plugin + ], + }; + + return ; +}; +```