diff --git a/site/.dumirc.ts b/site/.dumirc.ts index 48684485f..8ec052c89 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -148,14 +148,6 @@ export default defineConfig({ }, order: 10, }, - { - slug: 'options/graphs-concepts', - title: { - zh: '关系图概念', - en: 'Relation Graph Concepts', - }, - order: 1, - }, { slug: 'options/graphs', title: { diff --git a/site/docs/options/graphs-common/option-data.zh.md b/site/docs/options/graphs-common/graph-data.zh.md similarity index 100% rename from site/docs/options/graphs-common/option-data.zh.md rename to site/docs/options/graphs-common/graph-data.zh.md diff --git a/site/docs/options/graphs-common/option-behaviors.zh.md b/site/docs/options/graphs-common/option-behaviors.zh.md deleted file mode 100644 index bd8657ef6..000000000 --- a/site/docs/options/graphs-common/option-behaviors.zh.md +++ /dev/null @@ -1,22 +0,0 @@ -### Behaviors - -交互（Behaviors）指的是用户与画布及元素间的一系列操作，如拖拽、缩放、平移和选择等。这些交互方式增强了用户从图表中获取信息的直观性。 - -**类型定义**：`BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` - -默认情况下，`zoom-canvas`（缩放画布）和 `drag-canvas`（拖拽画布）交互是开启的。若需其他交互方式，则需进行额外配置。 - -支持 G6 的所有内置交互。以下是部分交互的简介，详情可参考 [G6 - 核心概念 - 交互](https://g6.antv.antgroup.com/manual/core-concept/behavior)： - -- [Brush Select](https://g6.antv.antgroup.com/api/behaviors/brush-select)：框选 -- [Click Element](https://g6.antv.antgroup.com/api/behaviors/click-select)：单击选中 -- [Collapse Expand](https://g6.antv.antgroup.com/api/behaviors/collapse-expand)：展开收起 -- [Create Edge](https://g6.antv.antgroup.com/api/behaviors/create-edge)：创建边 -- [Drag Canvas](https://g6.antv.antgroup.com/api/behaviors/drag-canvas)：拖拽画布 -- [Drag Element](https://g6.antv.antgroup.com/api/behaviors/drag-element)：拖拽元素 -- [Focus Element](https://g6.antv.antgroup.com/api/behaviors/focus-element)：聚焦元素 -- [Hover Element](https://g6.antv.antgroup.com/api/behaviors/hover-activate)：悬停元素 -- [Lasso Select](https://g6.antv.antgroup.com/api/behaviors/lasso-select)：套索选择 -- [Zoom Canvas](https://g6.antv.antgroup.com/api/behaviors/zoom-canvas)：缩放画布 - -若内置交互无法满足特定需求，还可根据 [G6 - 自定义交互](https://g6.antv.antgroup.com/manual/custom-extension/behavior) 教程来自定义交互。 diff --git a/site/docs/options/graphs-common/option-plugins.zh.md b/site/docs/options/graphs-common/option-plugins.zh.md deleted file mode 100644 index 0af72a7e6..000000000 --- a/site/docs/options/graphs-common/option-plugins.zh.md +++ /dev/null @@ -1,7 +0,0 @@ -### Plugins - -插件(Plugin)用于处理画布的渲染逻辑、额外组件渲染，例如在画布中额外挂载图形组件、实现撤销重做等功能。 - -**类型定义**：`PluginOptions[] | ((existingPlugins: PluginOptions[]) => PluginOptions[])` - -支持 G6 的所有内置插件。内置插件列表请参考 [G6 - API - 插件](https://g6.antv.antgroup.com/api/plugins/background)。 diff --git a/site/docs/options/graphs-common/tree-data.zh.md b/site/docs/options/graphs-common/tree-data.zh.md new file mode 100644 index 000000000..7aab4d5bc --- /dev/null +++ b/site/docs/options/graphs-common/tree-data.zh.md @@ -0,0 +1,59 @@ +### Data + +支持两种数据格式： + +1. **（👍 推荐）** 树图数据 + +类型定义： + +```ts +type TreeData = { + id: string; + children?: TreeData[]; + [key: string]: unknown; +}; +``` + +例如： + +```ts +const data = { + id: 'root', + children: [ + { + id: 'Child 1', + value: 10, + children: [ + { id: 'Sub 1-1', value: 5 }, + { id: 'Sub 1-2', value: 5 }, + ], + }, + { + id: 'Child 2', + value: 20, + children: [ + { id: 'Sub 2-1', value: 10 }, + { id: 'Sub 2-2', value: 10 }, + ], + }, + ], +}; +``` + +2. 图数据。若开启“展开-收起”交互，需确保数据中包含 `children` 字段。 + +```javascript +const graphData = { + nodes: [ + { id: '1', label: 'Node 1', children: ['2', '3'] }, + { id: '2', label: 'Node 2', children: ['4'] }, + { id: '3', label: 'Node 3' }, + { id: '4', label: 'Node 4' }, + ], + edges: [ + { source: '1', target: '2' }, + { source: '1', target: '3' }, + { source: '2', target: '4' }, + ], +}; +``` diff --git a/site/docs/options/graphs-demos/mind-map/collapse-expand.md b/site/docs/options/graphs-demos/mind-map/collapse-expand.md index 6438f4caf..935739909 100644 --- a/site/docs/options/graphs-demos/mind-map/collapse-expand.md +++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.md @@ -1,27 +1,7 @@ ## zh -通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。 - -- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` -- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` -- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` -- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` -- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 -- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` -- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` -- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 -- `refreshLayout`: 每次收起/展开节点后，是否刷新布局 +通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。 ## en -Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes. - -- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` -- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` -- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` -- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` -- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon -- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` -- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` -- `iconClassName/iconStyle`: CSS class name and inline styles for the icon -- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation +Enable the expand/collapse behavior for child nodes by configuring the `collapse-expand-react-node` behavior. For detailed configuration instructions, refer to [CollapseExpandReactNodeOptions](/en/options/graphs/overview#collapseexpandreactnode). diff --git a/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx index 23cdd1e93..d46b7da89 100644 --- a/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx +++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx @@ -5,44 +5,23 @@ import React from 'react'; const { PlusMinusIcon } = CollapseExpandIcon; const data = { - nodes: [ - { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] }, - { - id: 'Classification', - depth: 1, - children: ['Logistic regression', 'Linear discriminant analysis'], - style: { collapsed: true }, - }, - { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] }, - { id: 'Models diversity', depth: 2 }, - { id: 'Methods', depth: 2 }, - { id: 'Common', depth: 2 }, - { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] }, - { id: 'Logistic regression', depth: 2 }, - { id: 'Linear discriminant analysis', depth: 2 }, - { id: 'Multiple linear regression', depth: 2 }, - { id: 'Partial least squares', depth: 2 }, - ], - edges: [ - { source: 'Modeling Methods', target: 'Classification' }, - { source: 'Modeling Methods', target: 'Consensus' }, - { source: 'Modeling Methods', target: 'Regression' }, - { source: 'Consensus', target: 'Models diversity' }, - { source: 'Consensus', target: 'Methods' }, - { source: 'Consensus', target: 'Common' }, - { source: 'Classification', target: 'Logistic regression' }, - { source: 'Classification', target: 'Linear discriminant analysis' }, - { source: 'Regression', target: 'Multiple linear regression' }, - { source: 'Regression', target: 'Partial least squares' }, + id: 'Modeling Methods', + children: [ + { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] }, + { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] }, + { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] }, ], }; export default () => { const options: MindMapOptions = { type: 'linear', - containerStyle: { height: '200px' }, - autoFit: 'view', + containerStyle: { + height: '200px', + }, + autoFit: 'center', data, + defaultExpandLevel: 1, animation: false, }; diff --git a/site/docs/options/graphs-demos/mind-map/color.md b/site/docs/options/graphs-demos/mind-map/color.md index d100d969e..e65ca6023 100644 --- a/site/docs/options/graphs-demos/mind-map/color.md +++ b/site/docs/options/graphs-demos/mind-map/color.md @@ -1,7 +1,7 @@ ## zh -`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。 +`assign-color-by-branch` 作为内部数据处理的环节之一，通过调整 `colors` 配置，可以为思维导图的不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 [AssignColorByBranchOptions](/options/graphs/overview#assigncolorbybranch) 获取详细配置说明。 ## en -The `assign-color-by-branch` feature allows branch differentiation by modifying `colors` to assign different colors to the mind map branches. +`assign-color-by-branch` As a part of internal data processing, by adjusting the `colors` configuration, you can assign unique colors to different branches of the mind map in order to distinguish the branch structure more clearly. Please refer to [AssignColorByBranchOptions](/en/options/graphs/overview#assigncolorbybranch) for detailed configuration instructions. diff --git a/site/docs/options/graphs-demos/mind-map/color.tsx b/site/docs/options/graphs-demos/mind-map/color.tsx index af6bea6bb..3e1f934a8 100644 --- a/site/docs/options/graphs-demos/mind-map/color.tsx +++ b/site/docs/options/graphs-demos/mind-map/color.tsx @@ -1,55 +1,30 @@ -import { MindMap, type MindMapOptions, type G6 } from '@ant-design/graphs'; +import { MindMap, type MindMapOptions } from '@ant-design/graphs'; import React from 'react'; const data = { - nodes: [ - { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] }, - { - id: 'Classification', - depth: 1, - children: ['Logistic regression', 'Linear discriminant analysis'], - }, - { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] }, - { id: 'Models diversity', depth: 2 }, - { id: 'Methods', depth: 2 }, - { id: 'Common', depth: 2 }, - { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] }, - { id: 'Logistic regression', depth: 2 }, - { id: 'Linear discriminant analysis', depth: 2 }, - { id: 'Multiple linear regression', depth: 2 }, - { id: 'Partial least squares', depth: 2 }, - ], - edges: [ - { source: 'Modeling Methods', target: 'Classification' }, - { source: 'Modeling Methods', target: 'Consensus' }, - { source: 'Modeling Methods', target: 'Regression' }, - { source: 'Consensus', target: 'Models diversity' }, - { source: 'Consensus', target: 'Methods' }, - { source: 'Consensus', target: 'Common' }, - { source: 'Classification', target: 'Logistic regression' }, - { source: 'Classification', target: 'Linear discriminant analysis' }, - { source: 'Regression', target: 'Multiple linear regression' }, - { source: 'Regression', target: 'Partial least squares' }, + id: 'Modeling Methods', + children: [ + { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] }, + { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] }, + { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] }, ], }; export default () => { const options: MindMapOptions = { - containerStyle: { height: '200px' }, - type: 'boxed', + type: 'linear', autoFit: 'view', + padding: 8, data, transforms: (transforms) => [ ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'), { - ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || {} as any), - colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)'] + ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || ({} as any)), + colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)'], }, ], animation: false, }; - return <> - - ; + return ; }; diff --git a/site/docs/options/graphs-demos/mind-map/custom-node.tsx b/site/docs/options/graphs-demos/mind-map/custom-node.tsx index eb8655c33..a0a9dd142 100644 --- a/site/docs/options/graphs-demos/mind-map/custom-node.tsx +++ b/site/docs/options/graphs-demos/mind-map/custom-node.tsx @@ -2,34 +2,11 @@ import { MindMap, type MindMapOptions, measureTextSize } from '@ant-design/graph import React from 'react'; const data = { - nodes: [ - { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] }, - { - id: 'Classification', - depth: 1, - children: ['Logistic regression', 'Linear discriminant analysis'], - }, - { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] }, - { id: 'Models diversity', depth: 2 }, - { id: 'Methods', depth: 2 }, - { id: 'Common', depth: 2 }, - { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] }, - { id: 'Logistic regression', depth: 2 }, - { id: 'Linear discriminant analysis', depth: 2 }, - { id: 'Multiple linear regression', depth: 2 }, - { id: 'Partial least squares', depth: 2 }, - ], - edges: [ - { source: 'Modeling Methods', target: 'Classification' }, - { source: 'Modeling Methods', target: 'Consensus' }, - { source: 'Modeling Methods', target: 'Regression' }, - { source: 'Consensus', target: 'Models diversity' }, - { source: 'Consensus', target: 'Methods' }, - { source: 'Consensus', target: 'Common' }, - { source: 'Classification', target: 'Logistic regression' }, - { source: 'Classification', target: 'Linear discriminant analysis' }, - { source: 'Regression', target: 'Multiple linear regression' }, - { source: 'Regression', target: 'Partial least squares' }, + id: 'Modeling Methods', + children: [ + { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] }, + { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] }, + { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] }, ], }; @@ -58,19 +35,24 @@ const CustomNode = ({ text }: { text: string }) => { export default () => { const options: MindMapOptions = { - containerStyle: { height: '300px' }, + autoFit: 'view', + padding: 8, background: '#F3F3F6', data, node: { style: { component: (d) => , - size: (data) => measureTextSize(data.id, [24, 16]), + size: (d) => measureTextSize(d.id, [24, 16]), }, }, edge: { - style: { stroke: '#8B5DFF', endArrow: true }, + style: { + stroke: '#8B5DFF', + endArrow: true, + }, }, animation: false, }; + return ; }; diff --git a/site/docs/options/graphs-demos/mind-map/default.tsx b/site/docs/options/graphs-demos/mind-map/default.tsx index 7068e63de..f085e70e2 100644 --- a/site/docs/options/graphs-demos/mind-map/default.tsx +++ b/site/docs/options/graphs-demos/mind-map/default.tsx @@ -2,43 +2,23 @@ import { MindMap, type MindMapOptions } from '@ant-design/graphs'; import React from 'react'; const data = { - nodes: [ - { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] }, - { - id: 'Classification', - depth: 1, - children: ['Logistic regression', 'Linear discriminant analysis'], - }, - { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] }, - { id: 'Models diversity', depth: 2 }, - { id: 'Methods', depth: 2 }, - { id: 'Common', depth: 2 }, - { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] }, - { id: 'Logistic regression', depth: 2 }, - { id: 'Linear discriminant analysis', depth: 2 }, - { id: 'Multiple linear regression', depth: 2 }, - { id: 'Partial least squares', depth: 2 }, - ], - edges: [ - { source: 'Modeling Methods', target: 'Classification' }, - { source: 'Modeling Methods', target: 'Consensus' }, - { source: 'Modeling Methods', target: 'Regression' }, - { source: 'Consensus', target: 'Models diversity' }, - { source: 'Consensus', target: 'Methods' }, - { source: 'Consensus', target: 'Common' }, - { source: 'Classification', target: 'Logistic regression' }, - { source: 'Classification', target: 'Linear discriminant analysis' }, - { source: 'Regression', target: 'Multiple linear regression' }, - { source: 'Regression', target: 'Partial least squares' }, + id: 'Modeling Methods', + children: [ + { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] }, + { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] }, + { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] }, ], }; export default () => { const options: MindMapOptions = { - containerStyle: { height: '200px' }, autoFit: 'view', data, - edge: { style: { endArrow: true } }, + edge: { + style: { + endArrow: true, + }, + }, animation: false, }; return ; diff --git a/site/docs/options/graphs-demos/mind-map/direction.tsx b/site/docs/options/graphs-demos/mind-map/direction.tsx index 966b60ec1..068c323b7 100644 --- a/site/docs/options/graphs-demos/mind-map/direction.tsx +++ b/site/docs/options/graphs-demos/mind-map/direction.tsx @@ -1,36 +1,13 @@ import { MindMap, type MindMapOptions } from '@ant-design/graphs'; +import { Divider, Radio } from 'antd'; import React, { useState } from 'react'; -import { Radio, Divider } from 'antd'; const data = { - nodes: [ - { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] }, - { - id: 'Classification', - depth: 1, - children: ['Logistic regression', 'Linear discriminant analysis'], - }, - { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] }, - { id: 'Models diversity', depth: 2 }, - { id: 'Methods', depth: 2 }, - { id: 'Common', depth: 2 }, - { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] }, - { id: 'Logistic regression', depth: 2 }, - { id: 'Linear discriminant analysis', depth: 2 }, - { id: 'Multiple linear regression', depth: 2 }, - { id: 'Partial least squares', depth: 2 }, - ], - edges: [ - { source: 'Modeling Methods', target: 'Classification' }, - { source: 'Modeling Methods', target: 'Consensus' }, - { source: 'Modeling Methods', target: 'Regression' }, - { source: 'Consensus', target: 'Models diversity' }, - { source: 'Consensus', target: 'Methods' }, - { source: 'Consensus', target: 'Common' }, - { source: 'Classification', target: 'Logistic regression' }, - { source: 'Classification', target: 'Linear discriminant analysis' }, - { source: 'Regression', target: 'Multiple linear regression' }, - { source: 'Regression', target: 'Partial least squares' }, + id: 'Modeling Methods', + children: [ + { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] }, + { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] }, + { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] }, ], }; @@ -38,22 +15,28 @@ export default () => { const [direction, setDirection] = useState('right'); const options: MindMapOptions = { - containerStyle: { height: '200px' }, - direction, - autoFit: 'view', - edge: { style: { endArrow: true } }, data, + containerStyle: { + height: '300px', + }, + autoFit: 'view', + padding: 8, + type: 'linear', + direction, animation: false, }; - return <> - setDirection(e.target.value)}> - Right - Left - Alternate - - - Preview - - - ; + + return ( + <> + setDirection(e.target.value)}> + Right + Left + Alternate + + + Preview + + + + ); }; diff --git a/site/docs/options/graphs-demos/mind-map/type.tsx b/site/docs/options/graphs-demos/mind-map/type.tsx index 7f9fc5604..7c6d34a67 100644 --- a/site/docs/options/graphs-demos/mind-map/type.tsx +++ b/site/docs/options/graphs-demos/mind-map/type.tsx @@ -3,40 +3,57 @@ import { Divider } from 'antd'; import React from 'react'; const data = { - nodes: [ - { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] }, + id: 'Modeling Methods', + children: [ { id: 'Classification', - depth: 1, - children: ['Logistic regression', 'Linear discriminant analysis'], + children: [ + { id: 'Logistic Regression' }, + { id: 'Linear Discriminant Analysis', children: [{ id: "Fisher's Linear Discriminant" }] }, + { + id: 'Decision Trees', + children: [{ id: 'CART (Classification and Regression Trees)' }, { id: 'C4.5 Algorithm' }], + }, + ], + }, + { + id: 'Regression', + children: [{ id: 'Linear Regression' }, { id: 'Polynomial Regression' }], + }, + { + id: 'Clustering', + children: [ + { id: 'K-Means Clustering' }, + { + id: 'Hierarchical Clustering', + children: [{ id: 'Agglomerative Clustering' }, { id: 'Divisive Clustering' }], + }, + ], + }, + { + id: 'Dimensionality Reduction', + children: [ + { id: 'Principal Component Analysis (PCA)' }, + { + id: 'Feature Selection Techniques', + children: [{ id: 'Recursive Feature Elimination' }, { id: 'L1 Regularization' }], + }, + ], + }, + { + id: 'Ensemble Methods', + children: [ + { id: 'Bagging', children: [{ id: 'Bootstrap Aggregating' }] }, + { id: 'Stacking' }, + { id: 'Random Forest' }, + { id: 'Voting Classifier' }, + ], }, - { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] }, - { id: 'Models diversity', depth: 2 }, - { id: 'Methods', depth: 2 }, - { id: 'Common', depth: 2 }, - { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] }, - { id: 'Logistic regression', depth: 2 }, - { id: 'Linear discriminant analysis', depth: 2 }, - { id: 'Multiple linear regression', depth: 2 }, - { id: 'Partial least squares', depth: 2 }, - ], - edges: [ - { source: 'Modeling Methods', target: 'Classification' }, - { source: 'Modeling Methods', target: 'Consensus' }, - { source: 'Modeling Methods', target: 'Regression' }, - { source: 'Consensus', target: 'Models diversity' }, - { source: 'Consensus', target: 'Methods' }, - { source: 'Consensus', target: 'Common' }, - { source: 'Classification', target: 'Logistic regression' }, - { source: 'Classification', target: 'Linear discriminant analysis' }, - { source: 'Regression', target: 'Multiple linear regression' }, - { source: 'Regression', target: 'Partial least squares' }, ], }; export default () => { const options: MindMapOptions = { - containerStyle: { height: '200px' }, autoFit: 'view', data, animation: false, diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md index 42be4a8e7..271376fc9 100644 --- a/site/docs/options/graphs/dendrogram.zh.md +++ b/site/docs/options/graphs/dendrogram.zh.md @@ -40,7 +40,7 @@ import { Dendrogram } from '@ant-design/graphs'; | behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | - | | plugins | 设置画布插件 | [Plugins](#plugins) | - | - + ### Layout diff --git a/site/docs/options/graphs/faq.zh.md b/site/docs/options/graphs/faq.zh.md index 20b842f99..52907ed84 100644 --- a/site/docs/options/graphs/faq.zh.md +++ b/site/docs/options/graphs/faq.zh.md @@ -1,6 +1,6 @@ --- title: FAQ -order: 2 +order: 9 --- ### 1.如何在组件外获取图实例？ @@ -15,7 +15,7 @@ export default () => { }; ``` -`graph` 实例上 API 请参考 [G6 - API 列表](https://g6.antv.antgroup.com/api/graph/method)。 +Graph API 可参考 [G6 - API 列表](https://g6.antv.antgroup.com/api/graph/method)。 ### 2. Graphs 支持自定义吗？ @@ -42,4 +42,4 @@ import { MindMap } from '@ant-design/graphs'; export default () => { return ; }; -```` +``` diff --git a/site/docs/options/graphs/fishbone.zh.md b/site/docs/options/graphs/fishbone.zh.md index d1071e413..d05b39ce2 100644 --- a/site/docs/options/graphs/fishbone.zh.md +++ b/site/docs/options/graphs/fishbone.zh.md @@ -38,7 +38,7 @@ import { Fishbone } from '@ant-design/graphs'; | behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | - | | plugins | 设置画布插件 | [Plugins](#plugins) | - | - + ### Layout diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md index 8d0d703e7..8f725c19a 100644 --- a/site/docs/options/graphs/mind-map.zh.md +++ b/site/docs/options/graphs/mind-map.zh.md @@ -22,10 +22,10 @@ import { MindMap } from '@ant-design/graphs'; 基本用法 风格 -子节点分布 -自定义节点 +节点分布 展开/收起子节点 设置分支颜色 +自定义节点 ## API @@ -35,20 +35,19 @@ 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` | -| data | 设置数据 | [Data](#data) | - | +| data | 数据 | [Data](#data) | - | | layout | 设置布局配置 | [Layout](#layout) | - | -| behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | - | -| plugins | 设置画布插件 | [Plugins](#plugins) | - | +| type | 语法糖，设置展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | +| direction | 语法糖，设置节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` | +| nodeMinWidth | 节点的最小宽度，当文字内容不足时将居中显示 | `number` | `0` (`default` 类型)
`120` (`boxed` 类型) | +| nodeMaxWidth | 节点的最大宽度，超出部分将自动换行 | `number` | `300` | +| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - | - + ### Layout -脑图布局，深度相同的节点将会被放置在同一层。可配置参数如下： +脑图布局，深度相同的节点将会被放置在同一层。参数如下： | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | @@ -59,7 +58,3 @@ import { MindMap } from '@ant-design/graphs'; | getHGap | 每个节点的水平间隙 | (node: NodeData) => number | - | | getVGap | 每个节点的垂直间隙 | (node: NodeData) => number | - | | getSide | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 | (node: NodeData) => string | - | - - - - diff --git a/site/docs/options/graphs/overview.zh.md b/site/docs/options/graphs/overview.zh.md index 8e4721fbf..1d8da1dae 100644 --- a/site/docs/options/graphs/overview.zh.md +++ b/site/docs/options/graphs/overview.zh.md @@ -29,15 +29,15 @@ order: 0 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| data | 数据。关于图数据的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/data) | [GraphData](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - | -| 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) | - | -| edge | 边，支持 G6 内置边。关于边的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%BE%B9) | [EdgeOptions](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - | -| 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) | - | +| data | 数据。关于图数据的详细说明，请参考 [G6 - 核心概念 - 数据](https://g6.antv.antgroup.com/manual/core-concept/data) | [GraphData](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - | +| node | 节点，支持 G6 内置节点。关于节点的详细说明，请参考 [G6 - 核心概念 - 元素 - 节点](https://g6.antv.antgroup.com/manual/core-concept/element#节点) | [NodeOptions](https://g6.antv.antgroup.com/api/reference/g6/nodeoptions) | - | +| edge | 边，支持 G6 内置边。关于边的详细说明，请参考 [G6 - 核心概念 - 元素 - 边](https://g6.antv.antgroup.com/manual/core-concept/element#边) | [EdgeOptions](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - | +| combo | Combo，支持 G6 内置 Combo。关于 Combo 的详细说明，请参考 [G6 - 核心概念 - 元素 - 组合](https://g6.antv.antgroup.com/manual/core-concept/element#组合) | [ComboOptions](https://g6.antv.antgroup.com/api/reference/g6/combooptions) | - | +| layout | 布局，支持 G6 内置布局。关于图布局的详细说明，请参考 [G6 - 核心概念 - 布局](https://g6.antv.antgroup.com/manual/core-concept/layout) | 组件内查看 | - | +| behaviors | 设置用户交互事件 | [交互 Behavior](#交互-behavior) | - | +| plugins | 设置插件 | [插件 Plugin](#插件-plugin) | - | +| transforms | 设置数据处理 | [数据处理 Transform](#数据处理-transform) | - | | theme | 主题 | `light` \| `dark` \| string | - | -| 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[]) | 组件中查看 | ### 容器属性 @@ -54,7 +54,7 @@ order: 0 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置。关于动画的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/animation) | boolean \| [AnimationEffectTiming](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - | +| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置。关于动画的详细说明，请参考 [G6 - 核心概念 - 动画](https://g6.antv.antgroup.com/manual/core-concept/animation) | boolean \| [AnimationEffectTiming](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - | | autoFit | 是否自动适应 | `view` \| `center` | - | | autoResize | 是否自动调整画布大小 | boolean | false | | background | 画布背景色 | string | - | @@ -78,34 +78,188 @@ order: 0 | 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 | - | -### 交互 +## 交互 Behavior -## 定制需求 +交互（Behaviors）指的是用户与画布及元素间的一系列操作，如拖拽、缩放、平移和选择等。这些交互方式增强了用户从图表中获取信息的直观性。 -为了满足多样化需求，用户可以在标准图组件基础上进行扩展，实现自定义关系图。 +**类型定义**：`BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` -#### 更新基本配置 +默认情况下，`zoom-canvas`（缩放画布）和 `drag-canvas`（拖拽画布）交互是开启的。若需其他交互方式，则需进行额外配置。 -除了交互、插件、数据转换以外，其他图配置项都可以直接配置。 +Behavior 可定义为静态数组或动态函数： -js import { MindMap } from '@ant-design/graphs'; +- 静态数组：直接声明所有需要的交互方式。 +- **（👍 推荐）** 动态函数：基于现有交互数组，动态添加或调整。 -export default () => { const options = { autoFit: 'view', edge: { style: { lineWidth: 3, }, }, }; return ; }; +```jsx +import { MindMap } from '@ant-design/graphs'; + +export default () => { + // 静态数组形式 + const behaviors = ['zoom-canvas', { type: 'drag-canvas', direction: 'x' }]; + + // 动态函数形式 + const dynamicBehaviors = (existingBehaviors) => { + // console.log(existingBehaviors); 👉 [{ key: 'zoom-canvas', type: 'zoom-canvas' }, { key: 'drag-canvas', type: 'drag-canvas' }] + return [...existingBehaviors, { type: 'click-select' /* 参数 */ }]; + }; + + return ; +}; +``` + +支持 G6 提供的所有交互。以下是部分内置交互的简介，详情可参考 [G6 - 核心概念 - 交互](https://g6.antv.antgroup.com/manual/core-concept/behavior)： + +- [Brush Select](https://g6.antv.antgroup.com/api/behaviors/brush-select)：框选 +- [Click Element](https://g6.antv.antgroup.com/api/behaviors/click-select)：单击选中 +- [Collapse Expand](https://g6.antv.antgroup.com/api/behaviors/collapse-expand)：展开收起 +- [Create Edge](https://g6.antv.antgroup.com/api/behaviors/create-edge)：创建边 +- [Drag Canvas](https://g6.antv.antgroup.com/api/behaviors/drag-canvas)：拖拽画布 +- [Drag Element](https://g6.antv.antgroup.com/api/behaviors/drag-element)：拖拽元素 +- [Focus Element](https://g6.antv.antgroup.com/api/behaviors/focus-element)：聚焦元素 +- [Hover Element](https://g6.antv.antgroup.com/api/behaviors/hover-activate)：悬停元素 +- [Lasso Select](https://g6.antv.antgroup.com/api/behaviors/lasso-select)：套索选择 +- [Zoom Canvas](https://g6.antv.antgroup.com/api/behaviors/zoom-canvas)：缩放画布 + +若内置交互无法满足特定需求，还可根据 [G6 - 自定义交互](https://g6.antv.antgroup.com/manual/custom-extension/behavior) 教程来自定义交互。 + +此外，Graphs 也提供了一系列交互。 + +| 扩展 | 注册类型 | 描述 | 适用场景 | | +| --- | --- | --- | --- | --- | +| HoverActivateChain | `hover-activate-chain` | 鼠标悬停激活节点及其链路 | 所有图类型 | [配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate) | +| HoverActivateNeighbors | `hover-activate-neighbors` | 鼠标悬停高亮邻接的节点和边 | 所有图类型 | [配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate) | + +### HoverActivateChain + +**用途：** 当用户将鼠标悬停在一个节点或边上时，高亮该节点或边以及其直接关联的链路（上下游路径）。该交互常用于突出显示网络结构中的路径，帮助用户快速分析链路关系。 + +**配置项：** 同 [G6 - Behavior - HoverActivate](https://g6.antv.antgroup.com/api/behaviors/hover-activate) 配置项。 -#### 更新交互/插件/数据转换配置 +### HoverActivateNeighbors -> 详细讲解如何更新插件，该策略同样适用于交互与数据转换。 +**用途：** 鼠标悬停时，高亮与当前节点或边直接邻接的元素，帮助用户快速理解元素的局部上下文。 -在进行插件配置时，需特别留意插件的添加方式。为了确保既能增添新的功能，又不影响原有预设插件的正常运行，我们引入了一种 🔔 特定的插件更新策略。 +**配置项：** 同 [G6 - Behavior - HoverActivate](https://g6.antv.antgroup.com/api/behaviors/hover-activate) 配置项。 -具体来说，就是通过一个高阶函来对现有插件列表进行扩展，而不是直接替换。该函数接受当前图表实例（this: Graph）及现有插件配置（plugins: PluginOptions）作为参数，并返回一个新的插件配置数组。 +## 数据处理 Transform -以下是一个具体的示例，展示了如何在思维导图中添加小地图插件： +数据处理 (Transforms) 用于对用户输入数据进行处理。这种转换只会影响渲染数据，原始输入数据始终保持不变。 -```js +**类型定义**：`TransformOptions[] | (existingTransforms: TransformOptions[]) => TransformOptions[]` + +Transform 可定义为静态数组或动态函数： + +- 静态数组：明确列出所有需要的转换器。 +- **（👍 推荐）** 动态函数：基于现有转换器数组，动态生成新的转换器数组。 + +```jsx import { MindMap } from '@ant-design/graphs'; -export default () => { const options = { plugins: (existingPlugins) => [ ...existingPlugins, // 保留原有的所有插件 { type: 'minimap', key: 'minimap' }, // 添加小地图插件 ], }; +export default () => { + // 静态数组形式 + const transforms = [{ type: 'assign-color-by-branch' /* 参数 */ }, { type: 'map-edge-line-width' /* 参数 */ }]; + + // 动态函数形式 + const dynamicTransforms = (existingTransforms) => { + return [...existingTransforms, { type: 'arrange-edge-z-index' /* 参数 */ }]; + }; -return ; }; + return ; +}; ``` + +支持 G6 提供的所有数据处理。内置数据处理列表请查看 [G6 - API - 数据转换](https://g6.antv.antgroup.com/api/transforms/map-node-size)。 + +另外，Graphs 也提供了一系列数据处理。 + +| 扩展 | 注册类型 | 描述 | 适用场景 | | +| --- | --- | --- | --- | --- | +| TranslateReactNodeOrigin | `translate-react-node-origin` | 调整 React 节点原点，从左上调整成中心 | 所有图类型 | [配置项](#translatereactnodeorigin) | +| CollapseExpandReactNode | `collapse-expand-react-node` | 折叠/展开 React 节点 | 所有图类型 | [配置项](#collapseexpandreactnode) | +| AssignColorByBranch | `assign-color-by-branch` | 根据节点所在分支为节点分配颜色 | MindMap、IndentedTree、Fishbone | [配置项](#assigncolorbybranch) | +| ArrangeEdgeZIndex | `arrange-edge-z-index` | 调整边的层级 | IndentedTree、Fishbone | [配置项](#arrangeedgezindex) | +| MapEdgeLineWidth | `map-edge-line-width` | 调整边的描边宽度 | FlowDirectionGraph | [配置项](#mapedgelinewidth) | + +### TranslateReactNodeOrigin + +**用途：** 由于 React Node 默认原点位于左上角，与布局预期不符。通过调整偏移量 `dx` 和 `dy`，将原点设置为节点中心。 + +### CollapseExpandReactNode + +**用途：** 用于实现 React 节点的子节点展开和收起功能。仅对 React 节点类型有效。通过为节点绑定副作用，控制其“展开/收起”行为。 + +**配置项：** + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| enable | 是否启用收起/展开功能 | boolean \| ((data: NodeData) => boolean) | true | +| trigger | 点击指定元素，触发节点收起/展开 | `icon` \| `node` \| HTMLElement | `icon` | +| enable | 收起/展开指定方向上的邻居节点
- `in`: 前驱节点
- `out`: 后继节点
- `both`: 前驱和后继节点 | `in` \| `out` \| `both` | `out` | +| iconType | 内置图标语法糖 | `plus-minus` \| `arrow-count` | - | +| iconRender | 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 | (this: Graph, isCollapsed: boolean, data: NodeData) => React.ReactNode | - | +| iconPlacement | 图标相对于节点的位置 | `left` \| `right` \| `top` \| `bottom` \| ((this: Graph, data: NodeData) => CardinalPlacement) | `bottom` | +| iconOffsetX | 图标相对于节点的水平偏移量 | number \| ((this: Graph, data: NodeData) => number) | 0 | +| iconOffsetY | 图标相对于节点的垂直偏移量 | number \| ((this: Graph, data: NodeData) => number) | 0 | +| iconClassName | 指定图标的 CSS 类名 | string | - | +| iconStyle | 指定图标的内联样式 | React.CSSProperties | {} | +| refreshLayout | 每次收起/展开节点后，是否刷新布局 | boolean | false | + +### AssignColorByBranch + +**用途：** 为树图中的分支分配颜色，有助于在逻辑分支或层级结构中增强视觉区分。 + +**配置项：** + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| colors | 色板 | string[] | `['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F']` | + +### ArrangeEdgeZIndex + +**用途：** 调整边的 z-index 以优化渲染层次，避免边缘被遮挡或不清晰。常用于树图场景，配合 `assign-color-by-branch`使用。 + +### MapEdgeLineWidth + +**用途：** 根据边的属性（如权重）动态调整其线宽，使图形信息表达更直观。 + +**配置项：** + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| **(Required)** value | 指定边的线宽值 | number \| ((this: Graph, data: EdgeData) => number) | - | +| minValue | 线宽的最小值 | number \| ((data: EdgeData, edges: Record) => number) | - | +| maxValue | 线宽的最大值 | number \| ((data: EdgeData, edges: Record) => number) | - | +| minLineWidth | 映射线宽的最小阈值 | number \| ((data: EdgeData) => number) | 1 | +| maxLineWidth | 映射线宽的最大阈值 | number \| ((data: EdgeData) => number) | 10 | +| scale | 线宽的映射函数或比例（支持线性、对数等变换） | `linear` \| `log` \| `pow` \| `sqrt` \| ((value: number, domain: [number, number], range: [number, number]) => number) | `linear` | + +## 插件 Plugin + +插件 (Plugin) 用于处理画布的渲染逻辑、额外组件渲染，例如在画布中额外挂载图形组件、实现撤销重做等功能。 + +**类型定义**：`PluginOptions[] | ((existingPlugins: PluginOptions[]) => PluginOptions[])` + +Plugin 可定义为静态数组或动态函数： + +- 静态数组：明确列出所有需要的插件。 +- **（👍 推荐）** 动态函数：基于现有插件，动态新增或调整。 + +```jsx +import { MindMap } from '@ant-design/graphs'; + +export default () => { + // 静态数组形式 + const plugins = [{ type: 'minimap' /* 参数 */ }]; + + // 动态函数形式 + const dynamicTransforms = (existingPlugins) => { + // console.log(existingPlugins); 👉 [] + return [...existingPlugins, { type: 'minimap' /* 参数 */ }]; + }; + + return ; +}; +``` + +支持 G6 的所有内置插件。内置插件列表请参考 [G6 - API - 插件](https://g6.antv.antgroup.com/api/plugins/background)。