docs: perf graph overview and mindmap

ant-design · Dec 12, 2024 · 32aa3a6 · 32aa3a6
1 parent 2de7b9a
commit 32aa3a6
Show file tree

Hide file tree

Showing 18 changed files with 370 additions and 303 deletions.
diff --git 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/...s/options/graphs-common/option-data.zh.md → ...cs/options/graphs-common/graph-data.zh.md b/...s/options/graphs-common/option-data.zh.md → ...cs/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
diff --git a/site/docs/options/graphs-common/option-plugins.zh.md b/site/docs/options/graphs-common/option-plugins.zh.md
diff --git a/site/docs/options/graphs-common/tree-data.zh.md 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
@@ -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
@@ -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
@@ -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
@@ -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 <>
-    <MindMap {...options} />
-  </>;
+  return <MindMap {...options} />;
 };
diff --git 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) => <CustomNode text={d.id} />,
-        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 <MindMap {...options} />;
 };
diff --git 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 <MindMap {...options} />;