diff --git a/site/docs/options/graphs/dendrogram.en.md b/site/docs/options/graphs/dendrogram.en.md index 374503081..1ce808ef2 100644 --- a/site/docs/options/graphs/dendrogram.en.md +++ b/site/docs/options/graphs/dendrogram.en.md @@ -25,7 +25,7 @@ It is suitable for displaying hierarchical data relationships, clarifying key po ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties) ### Dendrogram @@ -33,7 +33,7 @@ For general configuration, refer to: [Common Graph Properties](./graphs/overview | --- | --- | --- | --- | | 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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md index 748a0f3a8..acad2075d 100644 --- a/site/docs/options/graphs/dendrogram.zh.md +++ b/site/docs/options/graphs/dendrogram.zh.md @@ -25,7 +25,7 @@ import { Dendrogram } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) ### Dendrogram @@ -33,7 +33,7 @@ import { Dendrogram } from '@ant-design/graphs'; | --- | --- | --- | --- | | direction | 语法糖,设置树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` | | compact | 是否为紧凑模式 | `boolean` | `false` | -| 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)` | - | +| layout | 树图布局配置 | [`DendrogramLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/flow-direction-graph.en.md b/site/docs/options/graphs/flow-direction-graph.en.md index a283738b9..ab69097ca 100644 --- a/site/docs/options/graphs/flow-direction-graph.en.md +++ b/site/docs/options/graphs/flow-direction-graph.en.md @@ -19,11 +19,11 @@ Ideal for complex information that requires clear logical relationships or decis ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: 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 7018247d8..3e4e92458 100644 --- a/site/docs/options/graphs/flow-direction-graph.zh.md +++ b/site/docs/options/graphs/flow-direction-graph.zh.md @@ -19,11 +19,11 @@ import { FlowDirectionGraph } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| 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)` | - | +| layout | AntV Dagre 布局配置 | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/flow-graph.en.md b/site/docs/options/graphs/flow-graph.en.md index 1ad802ed5..caaed2143 100644 --- a/site/docs/options/graphs/flow-graph.en.md +++ b/site/docs/options/graphs/flow-graph.en.md @@ -27,11 +27,11 @@ A flowchart shows the entire process from start to finish. Each node represents ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/flow-graph.zh.md b/site/docs/options/graphs/flow-graph.zh.md index 9c9cc5a54..d9c4eb24c 100644 --- a/site/docs/options/graphs/flow-graph.zh.md +++ b/site/docs/options/graphs/flow-graph.zh.md @@ -27,11 +27,11 @@ import { FlowGraph } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| 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)` | - | +| layout | AntV Dagre 布局配置 | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/indented-tree.en.md b/site/docs/options/graphs/indented-tree.en.md index 367162ab8..9ab53a827 100644 --- a/site/docs/options/graphs/indented-tree.en.md +++ b/site/docs/options/graphs/indented-tree.en.md @@ -34,7 +34,7 @@ Adjust the `collapse-expand-react-node` interaction configuration to control exp ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties) ### IndentedTree @@ -44,7 +44,7 @@ For general configuration, refer to: [Common Graph Properties](./graphs/overview | 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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md index 25b3f71e9..ad120f310 100644 --- a/site/docs/options/graphs/indented-tree.zh.md +++ b/site/docs/options/graphs/indented-tree.zh.md @@ -34,7 +34,7 @@ import { IndentedTree } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) ### IndentedTree @@ -42,9 +42,9 @@ import { IndentedTree } from '@ant-design/graphs'; | --- | --- | --- | --- | | type | 语法糖,设置缩进树图的展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | | direction | 语法糖,设置缩进树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'right'` | -| nodeMinWidth | 缩进树图节点的最小宽度 | `number` | `0` | -| nodeMaxWidth | 缩进树图节点的最大宽度 | `number` | `300` | -| 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)` | - | +| nodeMinWidth | 缩进树图节点的最小宽度,当文字内容不够时将居中显示 | `number` | `0` | +| nodeMaxWidth | 缩进树图节点的最大宽度,超出部分将自动换行 | `number` | `300` | +| layout | 缩进树布局配置 | [`IndentedLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/indented-layout) | `{ type: 'indented' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/mind-map.en.md b/site/docs/options/graphs/mind-map.en.md index 4fc78c120..162d13e5d 100644 --- a/site/docs/options/graphs/mind-map.en.md +++ b/site/docs/options/graphs/mind-map.en.md @@ -31,7 +31,7 @@ Adjust the `collapse-expand-react-node` interaction configuration to control exp ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./overview#common-graph-properties) ### MindMap @@ -41,7 +41,7 @@ For general configuration, refer to: [Common Graph Properties](./graphs/overview | 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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md index 5e744f71b..e129992d6 100644 --- a/site/docs/options/graphs/mind-map.zh.md +++ b/site/docs/options/graphs/mind-map.zh.md @@ -31,7 +31,7 @@ import { MindMap } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) ### MindMap @@ -39,9 +39,9 @@ import { MindMap } from '@ant-design/graphs'; | --- | --- | --- | --- | | type | 语法糖,设置思维导图的展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | | direction | 语法糖,设置思维导图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` | -| nodeMinWidth | 思维导图节点的最小宽度 | `number` | `0` (`default` 类型)
`120` (`boxed` 类型) | -| nodeMaxWidth | 思维导图节点的最大宽度 | `number` | `300` | -| 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)` | - | +| nodeMinWidth | 思维导图节点的最小宽度,当文字内容不足时将居中显示 | `number` | `0` (`default` 类型)
`120` (`boxed` 类型) | +| nodeMaxWidth | 思维导图节点的最大宽度,超出部分将自动换行 | `number` | `300` | +| layout | 思维导图布局配置 | [`MindmapLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/network-graph.en.md b/site/docs/options/graphs/network-graph.en.md index a1b65bdd6..2b0846d96 100644 --- a/site/docs/options/graphs/network-graph.en.md +++ b/site/docs/options/graphs/network-graph.en.md @@ -23,11 +23,11 @@ Use when you need to visualize nodes and their relationships in a complex networ ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/network-graph.zh.md b/site/docs/options/graphs/network-graph.zh.md index d0f64967e..e0c7abf24 100644 --- a/site/docs/options/graphs/network-graph.zh.md +++ b/site/docs/options/graphs/network-graph.zh.md @@ -23,11 +23,11 @@ import { NetworkGraph } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| 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)` | - | +| layout | D3 Force 布局配置 | [`D3ForceLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/organization-chart.en.md b/site/docs/options/graphs/organization-chart.en.md index dc4cd1096..eca998d14 100644 --- a/site/docs/options/graphs/organization-chart.en.md +++ b/site/docs/options/graphs/organization-chart.en.md @@ -32,14 +32,14 @@ Adjust the `collapse-expand-react-node` interaction configuration to control exp ## API -For general configuration, refer to: [Common Graph Properties](./graphs/overview#common-graph-properties) +For general configuration, refer to: [Common Graph Properties](./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)` | - | +| 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 behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/organization-chart.zh.md b/site/docs/options/graphs/organization-chart.zh.md index 00fb707d3..8ba03144a 100644 --- a/site/docs/options/graphs/organization-chart.zh.md +++ b/site/docs/options/graphs/organization-chart.zh.md @@ -32,14 +32,14 @@ import { OrganizationChart } from '@ant-design/graphs'; ## API -通用配置参考:[图通用属性](./graphs/overview#图通用属性) +通用配置参考:[图通用属性](./overview#图通用属性) ### OrganizationChart | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | direction | 语法糖,设置节点的排布方向。当设置 `layout.rankdir` 时会以后者为准 | `'vertical'` \| `'horizontal'` | `'vertical'` | -| 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)` | - | +| layout | AntV Dagre 布局配置 | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/overview.en.md b/site/docs/options/graphs/overview.en.md index 83dfebc0c..fec8284f3 100644 --- a/site/docs/options/graphs/overview.en.md +++ b/site/docs/options/graphs/overview.en.md @@ -25,34 +25,34 @@ For general configuration reference: [General Properties](./general-properties.e | 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) | - | +| autoFit | Whether to auto-fit the graph | `{ 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`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming)`}`
\| `'view'` \| `'center'` | - | +| animation | Enable or disable global animations. If animation config is provided, it enables animations and uses the config as the base. For more details on animations, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/animation) | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming) | - | +| autoResize | Whether to automatically adjust the canvas size | `boolean` | `false` | +| background | Background color of the canvas | `string` | - | +| combo | Combo support, using G6 built-in Combos. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/element#combo) | [`ComboOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/combooptions) | - | +| container | Canvas container | `string` \| [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) \| [`Canvas`](https://g.antv.antgroup.com/en/api/renderer/canvas) | - | +| cursor | Cursor style | [`Cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) | - | +| data | Graph data. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/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) | - | +| edge | Edge configuration, using G6 built-in edges. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/element#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` | - | +| layout | Graph layout configuration, using G6 built-in layouts. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/layout) | [`LayoutOptions`](https://g6.antv.antgroup.com/en/examples#layout-force-directed) \| `LayoutOptions[]` | - | +| node | Node configuration, using G6 built-in nodes. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/element#node) | [`NodeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/nodeoptions) | - | +| padding | Canvas padding, usually applied during auto-fitting based on padding | `number` \| `number[]` | - | +| renderer | Access renderer | `(layer: 'background' \| 'main' \| 'label' \| 'transient') =>`[`IRenderer`](https://g.antv.antgroup.com/en/api/canvas/options#renderer) | - | | rotation | Rotation angle | `number` | `0` | -| theme | Theme setting | `'light'` \| `'dark'` \| `string` | - | +| theme | Theme | `'light'` \| `'dark'` \| `string` | - | | width | Canvas width | `number` | - | | x | Viewport x-coordinate | `number` | - | | y | Viewport y-coordinate | `number` | - | -| zoom | Zoom level | `number` | `1` | +| zoom | Zoom scale | `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` | - | +| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | See component | +| plugins | Set canvas plugins to handle rendering logic and additional components. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | See component | +| onDestroy | Callback executed after the graph is destroyed (`graph.destroy()`) | `() => void` | - | +| onInit | Callback executed after the graph is initialized (`new Graph()`) | `(graph:`[`Graph`](https://g6.antv.antgroup.com/en/api/reference/g6/graph)`) => void` | - | +| onReady | Callback executed after the graph is rendered (`graph.render()`) | `(graph:`[`Graph`](https://g6.antv.antgroup.com/en/api/reference/g6/graph)`) => void` | - | ## Customization diff --git a/site/docs/options/graphs/overview.zh.md b/site/docs/options/graphs/overview.zh.md index 43dd33b0a..8a3df35e3 100644 --- a/site/docs/options/graphs/overview.zh.md +++ b/site/docs/options/graphs/overview.zh.md @@ -25,21 +25,21 @@ order: 0 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| 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) | - | +| 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`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming)`}`
\| `'view'` \| `'center'` | - | +| animation | 启用或关闭全局动画,为动画配置项时,会启用动画,并将该动画配置作为全局动画的基础配置。关于动画的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/animation) | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - | | autoResize | 是否自动调整画布大小 | `boolean` | `false` | | background | 画布背景色 | `string` | - | -| 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.antv.antgroup.com/api/reference/g6/graphdata) | - | +| combo | Combo,支持 G6 内置 Combo。关于 Combo 的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E7%BB%84%E5%90%88) | [`ComboOptions`](https://g6.antv.antgroup.com/api/reference/g6/combooptions) | - | +| container | 画布容器 | `string` \| [`HTMLElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement) \| [`Canvas`](https://g.antv.antgroup.com/api/renderer/canvas) | - | +| cursor | 指针样式 | [`Cursor`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor) | - | +| data | 数据。关于图数据的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/data) | [`GraphData`](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - | | devicePixelRatio | 设备像素比 | `number` | - | -| edge | 边,支持 G6 内置边,了解相关配置项请查阅[此处](https://g6.antv.antgroup.com/api/elements/edges/base-edge) | [`EdgeOptions`](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - | +| edge | 边,支持 G6 内置边。关于边的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%BE%B9) | [`EdgeOptions`](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - | | height | 画布高度 | `number` | - | -| 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) | - | +| layout | 布局,支持 G6 内置布局。关于图布局的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/layout) | [`LayoutOptions`](https://g6.antv.antgroup.com/examples#layout-force-directed) \| `LayoutOptions[]` | - | +| node | 节点,支持 G6 内置节点。关于节点的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%8A%82%E7%82%B9) | [`NodeOptions`](https://g6.antv.antgroup.com/api/reference/g6/nodeoptions) | - | | padding | 画布内边距,通常在自适应时,会根据内边距进行适配 | `number` \| `number[]` | - | -| renderer | 获取渲染器 | `(layer: 'background' \| 'main' \| 'label' \| 'transient') => IRenderer` | - | +| renderer | 获取渲染器 | `(layer: 'background' \| 'main' \| 'label' \| 'transient') =>`[`IRenderer`](https://g.antv.antgroup.com/api/canvas/options#renderer) | - | | rotation | 旋转角度 | `number` | `0` | | theme | 主题 | `'light'` \| `'dark'` \| `string` | - | | width | 画布宽度 | `number` | - | @@ -47,12 +47,12 @@ order: 0 | y | 视口 y 坐标 | `number` | - | | zoom | 缩放比例 | `number` | `1` | | zoomRange | 缩放范围 | `[number, number]` | `[0.01, 10]` | -| 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)` | 组件中查看 | +| behaviors | 设置用户交互事件,同样支持 G6 内置交互。关于交互的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | 组件中查看 | +| plugins | 设置画布插件,处理画布的渲染逻辑、额外组件渲染等,同样支持 G6 内置插件。关于插件的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| transforms | 设置数据转换器,处理用户输入数据并转换为适合后续处理的内部流转数据,同样支持 G6 内置数据转换器。关于数据转换的详细介绍,请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | 组件中查看 | | onDestroy | 当图销毁后(即 `graph.destroy()` 之后)执行回调 | `() => void` | - | -| onInit | 当图初始化完成后(即 `new Graph()` 之后)执行回调 | `(graph: Graph) => void` | - | -| onReady | 当图渲染完成后(即 `graph.render()` 之后)执行回调 | `(graph: Graph) => void` | - | +| onInit | 当图初始化完成后(即 `new Graph()` 之后)执行回调 | `(graph:`[`Graph`](https://g6.antv.antgroup.com/api/reference/g6/graph)`) => void` | - | +| onReady | 当图渲染完成后(即 `graph.render()` 之后)执行回调 | `(graph:`[`Graph`](https://g6.antv.antgroup.com/api/reference/g6/graph)`) => void` | - | ## 自定义定制