From 710530ee98fa8249f3c03e46140a036ec027cac5 Mon Sep 17 00:00:00 2001
From: yvonneyx <zhuyuxin0627@gmail.com>
Date: Thu, 12 Dec 2024 20:05:21 +0800
Subject: [PATCH] docs: perf

---
 .../dendrogram/collapse-expand.md             |  4 +-
 .../dendrogram/collapse-expand.tsx            | 50 +++-----------
 .../graphs-demos/dendrogram/compact.tsx       | 64 +++++-------------
 .../graphs-demos/dendrogram/default.tsx       | 51 +++------------
 .../graphs-demos/dendrogram/direction.tsx     | 62 +++++-------------
 .../graphs-demos/fishbone/decision.tsx        | 10 +--
 .../options/graphs-demos/fishbone/default.tsx |  7 +-
 .../options/graphs-demos/fishbone/layout.tsx  | 12 ++--
 .../indented-tree/collapse-expand.md          | 24 +------
 .../indented-tree/collapse-expand.tsx         | 65 +++++++++----------
 .../graphs-demos/indented-tree/color.md       |  4 +-
 .../graphs-demos/indented-tree/color.tsx      | 55 ++++------------
 .../indented-tree/custom-node.tsx             | 57 +++++-----------
 .../graphs-demos/indented-tree/default.tsx    | 45 +++----------
 .../graphs-demos/indented-tree/direction.tsx  | 43 +++---------
 .../graphs-demos/indented-tree/type.tsx       | 54 +++++----------
 .../graphs-demos/mind-map/collapse-expand.md  |  4 +-
 .../graphs-demos/mind-map/collapse-expand.tsx | 27 ++++----
 .../options/graphs-demos/mind-map/color.md    |  4 +-
 .../graphs-demos/mind-map/direction.tsx       | 21 +++---
 site/docs/options/graphs/dendrogram.zh.md     | 15 ++---
 site/docs/options/graphs/fishbone.zh.md       | 21 +++---
 site/docs/options/graphs/indented-tree.zh.md  | 31 ++++++---
 23 files changed, 221 insertions(+), 509 deletions(-)

diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.md b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md
index 41dcbc779..21d26434d 100644
--- a/site/docs/options/graphs-demos/dendrogram/collapse-expand.md
+++ b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md
@@ -1,7 +1,7 @@
 ## zh
 
-添加 G6 内置 CollapseExpand 交互，双击触发展开/收起。更多 G6 内置交互请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior)。
+通过配置 G6 内置 CollapseExpand 交互 (`collapse-expand`)，双击触发展开/收起。具体可参考 [CollapseExpandOptions](https://g6.antv.antgroup.com/api/behaviors/collapse-expand) 获取详细配置说明。
 
 ## en
 
-Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For more built-in interactions, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior).
+Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For detailed configuration instructions, refer to [CollapseExpandOptions](https://g6.antv.antgroup.com/en/api/behaviors/collapse-expand).
diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx b/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx
index c95dd75ff..eece91e1c 100644
--- a/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx
+++ b/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx
@@ -1,50 +1,20 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { 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",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  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: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
     behaviors: (behaviors) => [...behaviors, 'collapse-expand'],
   };
 
-  return <Dendrogram {...options} />
+  return <Dendrogram {...options} />;
 };
diff --git a/site/docs/options/graphs-demos/dendrogram/compact.tsx b/site/docs/options/graphs-demos/dendrogram/compact.tsx
index 9a70ea7e5..54178fade 100644
--- a/site/docs/options/graphs-demos/dendrogram/compact.tsx
+++ b/site/docs/options/graphs-demos/dendrogram/compact.tsx
@@ -1,56 +1,26 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { 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",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  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: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
-    compact: true,
     autoFit: 'view',
     data,
-    animation: false,
+    compact: true,
   };
 
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <Dendrogram {...options} direction='vertical' />
-    <Dendrogram {...options} direction='horizontal' />
-    <Dendrogram {...options} direction='radial' />
-  </div>;
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <Dendrogram {...options} direction="vertical" />
+      <Dendrogram {...options} direction="horizontal" />
+      <Dendrogram {...options} direction="radial" />
+    </div>
+  );
 };
diff --git a/site/docs/options/graphs-demos/dendrogram/default.tsx b/site/docs/options/graphs-demos/dendrogram/default.tsx
index 109518764..fea2739d0 100644
--- a/site/docs/options/graphs-demos/dendrogram/default.tsx
+++ b/site/docs/options/graphs-demos/dendrogram/default.tsx
@@ -1,50 +1,19 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { 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",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  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: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
-    animation: false,
   };
 
-  return <Dendrogram {...options} />
+  return <Dendrogram {...options} />;
 };
diff --git a/site/docs/options/graphs-demos/dendrogram/direction.tsx b/site/docs/options/graphs-demos/dendrogram/direction.tsx
index 59fdebd89..71dfb862b 100644
--- a/site/docs/options/graphs-demos/dendrogram/direction.tsx
+++ b/site/docs/options/graphs-demos/dendrogram/direction.tsx
@@ -1,55 +1,25 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { 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",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  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: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
-    animation: false,
   };
 
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <Dendrogram {...options} direction='vertical' />
-    <Dendrogram {...options} direction='horizontal' />
-    <Dendrogram {...options} direction='radial' />
-  </div>;
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <Dendrogram {...options} direction="vertical" />
+      <Dendrogram {...options} direction="horizontal" />
+      <Dendrogram {...options} direction="radial" />
+    </div>
+  );
 };
diff --git a/site/docs/options/graphs-demos/fishbone/decision.tsx b/site/docs/options/graphs-demos/fishbone/decision.tsx
index d4b34c053..a8807370c 100644
--- a/site/docs/options/graphs-demos/fishbone/decision.tsx
+++ b/site/docs/options/graphs-demos/fishbone/decision.tsx
@@ -1,7 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
+import React from 'react';
 
 const data = {
   id: 'Overcome procrastination',
@@ -45,13 +43,11 @@ const data = {
   ],
 };
 
-
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     type: 'decision',
-    data: treeToGraphData(data),
+    data,
   };
 
   return <Fishbone {...options} />;
diff --git a/site/docs/options/graphs-demos/fishbone/default.tsx b/site/docs/options/graphs-demos/fishbone/default.tsx
index 53683a58f..65a10e2c6 100644
--- a/site/docs/options/graphs-demos/fishbone/default.tsx
+++ b/site/docs/options/graphs-demos/fishbone/default.tsx
@@ -1,7 +1,5 @@
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
 import React from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -55,9 +53,8 @@ const data = {
 
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    data: treeToGraphData(data),
+    data,
   };
 
   return <Fishbone {...options} />;
diff --git a/site/docs/options/graphs-demos/fishbone/layout.tsx b/site/docs/options/graphs-demos/fishbone/layout.tsx
index f9702e20b..29405d9c3 100644
--- a/site/docs/options/graphs-demos/fishbone/layout.tsx
+++ b/site/docs/options/graphs-demos/fishbone/layout.tsx
@@ -1,7 +1,5 @@
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
 import React from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -53,17 +51,15 @@ const data = {
   ],
 };
 
-
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    data: treeToGraphData(data),
+    data,
     layout: {
       hGap: 40,
       vGap: 60,
-      getRibSep: (node) => node.depth === 0 ? 0 : -40
-    }
+      getRibSep: (node) => (node.depth === 0 ? 0 : -40),
+    },
   };
 
   return <Fishbone {...options} />;
diff --git a/site/docs/options/graphs-demos/indented-tree/collapse-expand.md b/site/docs/options/graphs-demos/indented-tree/collapse-expand.md
index 6438f4caf..c834ddbb4 100644
--- a/site/docs/options/graphs-demos/indented-tree/collapse-expand.md
+++ b/site/docs/options/graphs-demos/indented-tree/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) 获取详细配置说明。此外，还可以配置 `defaultExpandLevel` 来控制默认展开层级。
 
 ## 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). Additionally, configure `defaultExpandLevel` to control the default expansion level.
diff --git a/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx b/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx
index 3607e597f..158ed08d0 100644
--- a/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx
@@ -1,34 +1,22 @@
-import { IndentedTree, CollapseExpandIcon, type IndentedTreeOptions } from '@ant-design/graphs';
-import React from 'react';
+import { CollapseExpandIcon, IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
 
 const { PlusMinusIcon } = CollapseExpandIcon;
 
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'], style: { collapsed: true } },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  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' },
-  ],
-};
-
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: IndentedTreeOptions = {
-    type: 'boxed',
-    containerStyle: { height: '240px' },
+    type: 'linear',
     autoFit: 'view',
     data,
+    defaultExpandLevel: 2,
     animation: false,
   };
 
@@ -36,19 +24,24 @@ export default () => {
     return (transforms) => [
       ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
       {
-        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any),
+        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || ({} as any)),
         ...options,
       },
-    ]
-  }
+    ];
+  };
 
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true })} />
-    <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true, trigger: 'node' })} />
-    <IndentedTree {...options} transforms={updateCollapseExpandBehavior({
-      enable: true,
-      iconRender: (isCollapsed) => <PlusMinusIcon isCollapsed={isCollapsed} />,
-      iconOffsetY: 8,
-    })} />
-  </div>;
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true })} />
+      <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true, trigger: 'node' })} />
+      <IndentedTree
+        {...options}
+        transforms={updateCollapseExpandBehavior({
+          enable: true,
+          iconRender: (isCollapsed) => <PlusMinusIcon isCollapsed={isCollapsed} />,
+          iconOffsetY: 8,
+        })}
+      />
+    </div>
+  );
 };
diff --git a/site/docs/options/graphs-demos/indented-tree/color.md b/site/docs/options/graphs-demos/indented-tree/color.md
index b73cece67..3da8f9ffc 100644
--- a/site/docs/options/graphs-demos/indented-tree/color.md
+++ b/site/docs/options/graphs-demos/indented-tree/color.md
@@ -1,7 +1,7 @@
 ## zh
 
-`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。
+`assign-color-by-branch` 作为内部数据处理的环节之一，通过调整 `colors` 配置，可以为不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 [AssignColorByBranchOptions](/options/graphs/overview#assigncolorbybranch) 获取详细配置说明。
 
 ## en
 
-`assign-color-by-branch` is a built-in data transformation step that allows you to assign different colors to branches by modifying`colors`.
+`assign-color-by-branch` As a part of internal data processing, by adjusting the `colors` configuration, you can assign unique colors to different branches 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/indented-tree/color.tsx b/site/docs/options/graphs-demos/indented-tree/color.tsx
index 7ed7da9e7..e39ca9588 100644
--- a/site/docs/options/graphs-demos/indented-tree/color.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/color.tsx
@@ -1,55 +1,28 @@
-import { IndentedTree, type IndentedTreeOptions, type G6 } 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' },
-  ],
-};
+import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
-    type: 'boxed',
+    type: 'linear',
     autoFit: 'view',
     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 <>
-    <IndentedTree {...options} />
-  </>;
+  return <IndentedTree {...options} />;
 };
diff --git a/site/docs/options/graphs-demos/indented-tree/custom-node.tsx b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
index 81c6bc247..103c09bf5 100644
--- a/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
@@ -1,37 +1,5 @@
 import { IndentedTree, type IndentedTreeOptions, measureTextSize } 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' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 const CustomNode = ({ text }: { text: string }) => {
   const prefix = text === 'Modeling Methods' ? '🔍 ' : '';
@@ -44,9 +12,10 @@ const CustomNode = ({ text }: { text: string }) => {
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: '16px',
-        backgroundColor: '#f7f0fe',
-        color: '#873bf4',
-        boxShadow: '0 0 0 3px #873bf4',
+        backgroundColor: '#FFF6E3',
+        color: '#8B5DFF',
+        boxShadow: '0 0 0 2px #8B5DFF',
+        fontFamily: 'Futura',
       }}
     >
       {prefix}
@@ -56,10 +25,18 @@ const CustomNode = ({ text }: { text: string }) => {
 };
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    padding: 20,
+    padding: 8,
+    background: '#F3F3F6',
     data,
     node: {
       style: {
@@ -68,7 +45,9 @@ export default () => {
       },
     },
     edge: {
-      style: { stroke: '#873bf4' },
+      style: {
+        stroke: '#8B5DFF',
+      },
     },
     animation: false,
   };
diff --git a/site/docs/options/graphs-demos/indented-tree/default.tsx b/site/docs/options/graphs-demos/indented-tree/default.tsx
index 459e1b464..664c4c523 100644
--- a/site/docs/options/graphs-demos/indented-tree/default.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/default.tsx
@@ -1,44 +1,19 @@
 import { IndentedTree, type IndentedTreeOptions } 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' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
-    animation: false,
   };
+
   return <IndentedTree {...options} />;
 };
diff --git a/site/docs/options/graphs-demos/indented-tree/direction.tsx b/site/docs/options/graphs-demos/indented-tree/direction.tsx
index e219b5bf0..699eff38e 100644
--- a/site/docs/options/graphs-demos/indented-tree/direction.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/direction.tsx
@@ -1,48 +1,21 @@
 import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
 import { Divider, Radio } from 'antd';
-import React, { useState } 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' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
   const [direction, setDirection] = useState<IndentedTreeOptions['direction']>('right');
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
 
   const options: IndentedTreeOptions = {
-    containerStyle: { height: '400px' },
     direction,
     autoFit: 'view',
     data,
-    animation: false,
   };
 
   return (
diff --git a/site/docs/options/graphs-demos/indented-tree/type.tsx b/site/docs/options/graphs-demos/indented-tree/type.tsx
index fa3e87140..3def254e8 100644
--- a/site/docs/options/graphs-demos/indented-tree/type.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/type.tsx
@@ -1,49 +1,25 @@
 import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
-import React from 'react';
-import { Flex } 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' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
     animation: false,
   };
 
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
-    <IndentedTree {...options} type='linear' />
-    <IndentedTree {...options} type='boxed' />
-  </div>
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
+      <IndentedTree {...options} type="linear" />
+      <IndentedTree {...options} type="boxed" />
+    </div>
+  );
 };
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 935739909..c834ddbb4 100644
--- a/site/docs/options/graphs-demos/mind-map/collapse-expand.md
+++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.md
@@ -1,7 +1,7 @@
 ## zh
 
-通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。
+通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。此外，还可以配置 `defaultExpandLevel` 来控制默认展开层级。
 
 ## en
 
-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).
+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). Additionally, configure `defaultExpandLevel` to control the default expansion level.
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 d46b7da89..49682d539 100644
--- a/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
+++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
@@ -1,28 +1,23 @@
 import { CollapseExpandIcon, MindMap, type MindMapOptions } from '@ant-design/graphs';
 import { Divider } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 const { PlusMinusIcon } = CollapseExpandIcon;
 
-const data = {
-  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 [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: MindMapOptions = {
     type: 'linear',
-    containerStyle: {
-      height: '200px',
-    },
-    autoFit: 'center',
+    autoFit: 'view',
     data,
-    defaultExpandLevel: 1,
-    animation: false,
+    defaultExpandLevel: 2
   };
 
   const updateCollapseExpandBehavior = (options) => {
diff --git a/site/docs/options/graphs-demos/mind-map/color.md b/site/docs/options/graphs-demos/mind-map/color.md
index e65ca6023..3da8f9ffc 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` 配置，可以为思维导图的不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 [AssignColorByBranchOptions](/options/graphs/overview#assigncolorbybranch) 获取详细配置说明。
+`assign-color-by-branch` 作为内部数据处理的环节之一，通过调整 `colors` 配置，可以为不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 [AssignColorByBranchOptions](/options/graphs/overview#assigncolorbybranch) 获取详细配置说明。
 
 ## en
 
-`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.
+`assign-color-by-branch` As a part of internal data processing, by adjusting the `colors` configuration, you can assign unique colors to different branches 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/direction.tsx b/site/docs/options/graphs-demos/mind-map/direction.tsx
index 068c323b7..21723ba8b 100644
--- a/site/docs/options/graphs-demos/mind-map/direction.tsx
+++ b/site/docs/options/graphs-demos/mind-map/direction.tsx
@@ -1,24 +1,19 @@
 import { MindMap, type MindMapOptions } from '@ant-design/graphs';
 import { Divider, Radio } from 'antd';
-import React, { useState } from 'react';
-
-const data = {
-  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' }] },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
   const [direction, setDirection] = useState<MindMapOptions['direction']>('right');
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
 
   const options: MindMapOptions = {
     data,
-    containerStyle: {
-      height: '300px',
-    },
     autoFit: 'view',
     padding: 8,
     type: 'linear',
diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md
index 271376fc9..e5c46f219 100644
--- a/site/docs/options/graphs/dendrogram.zh.md
+++ b/site/docs/options/graphs/dendrogram.zh.md
@@ -33,18 +33,17 @@ import { Dendrogram } from '@ant-design/graphs';
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| data | 数据 | [Data](#data) | - |
 | direction | 语法糖，设置树图节点的排布方向。当设置 layout.direction 时会以后者为准 | `vertical` \| `horizontal` \| `radial` | `horizontal` |
 | compact | 是否为紧凑模式 | boolean | false |
-| data | 设置数据 | [Data](#data) | - |
-| layout | 设置布局配置 | [Layout](#layout) | - |
-| behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | - |
-| plugins | 设置画布插件 | [Plugins](#plugins) | - |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - |
+| layout | 生态树布局配置 | [Layout](#layout) | - |
 
-<embed src="../graphs-common/graph-data.zh.md"></embed>
+<embed src="../graphs-common/tree-data.zh.md"></embed>
 
 ### Layout
 
-树图布局，可配置的参数如下：
+生态树布局，可配置的参数如下：
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -53,7 +52,3 @@ import { Dendrogram } from '@ant-design/graphs';
 | nodeSep | 节点间距 | number | 40 |
 | rankSep | 层与层之间的间距 | number | 200 |
 | radial | 是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 `LR` 或 `RL` |  |  |
-
-<embed src="../graphs-common/option-behaviors.zh.md"></embed>
-
-<embed src="../graphs-common/option-plugins.zh.md"></embed>
diff --git a/site/docs/options/graphs/fishbone.zh.md b/site/docs/options/graphs/fishbone.zh.md
index d05b39ce2..50a8c400a 100644
--- a/site/docs/options/graphs/fishbone.zh.md
+++ b/site/docs/options/graphs/fishbone.zh.md
@@ -30,19 +30,18 @@ import { Fishbone } from '@ant-design/graphs';
 
 通用配置参考：[图通用属性](./overview#图通用属性)
 
-| 属性      | 说明             | 类型                    | 默认值  |
-| --------- | ---------------- | ----------------------- | ------- |
-| type      | 鱼骨图类型       | `cause` \| `decision`   | `cause` |
-| data      | 设置数据         | [Data](#data)           | -       |
-| layout    | 设置布局配置     | [Layout](#layout)       | -       |
-| behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | -       |
-| plugins   | 设置画布插件     | [Plugins](#plugins)     | -       |
+| 属性               | 说明                               | 类型                  | 默认值  |
+| ------------------ | ---------------------------------- | --------------------- | ------- |
+| data               | 数据                               | [Data](#data)         | -       |
+| type               | 鱼骨图类型                         | `cause` \| `decision` | `cause` |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number                | -       |
+| layout             | 布局配置                           | [Layout](#layout)     | -       |
 
-<embed src="../graphs-common/graph-data.zh.md"></embed>
+<embed src="../graphs-common/tree-data.zh.md"></embed>
 
 ### Layout
 
-鱼骨图布局，可配置参数如下：
+鱼骨图布局。参数如下：
 
 | 属性      | 说明         | 类型                       | 默认值           |
 | --------- | ------------ | -------------------------- | ---------------- |
@@ -51,7 +50,3 @@ import { Fishbone } from '@ant-design/graphs';
 | vGap      | 设置垂直间距 | number                     | 默认使用节点高度 |
 | hGap      | 设置水平间距 | number                     | 默认使用节点宽度 |
 | getRibSep | 设置鱼骨间距 | (node: NodeData) => number | () => 60         |
-
-<embed src="../graphs-common/option-behaviors.zh.md"></embed>
-
-<embed src="../graphs-common/option-plugins.zh.md"></embed>
diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md
index 65ca6a14d..dfa71577a 100644
--- a/site/docs/options/graphs/indented-tree.zh.md
+++ b/site/docs/options/graphs/indented-tree.zh.md
@@ -38,11 +38,26 @@ 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/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[])` | - |
+| data | 数据 | [Data](#data) | - |
+| type | 语法糖，设置展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction | 语法糖，设置节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'right'` |
+| nodeMinWidth | 节点的最小宽度，当文字内容不够时将居中显示 | `number` | `0` |
+| nodeMaxWidth | 节点的最大宽度，超出部分将自动换行 | `number` | `300` |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - |
+| layout | 缩进树布局配置 | [Layout](#layout) | - |
+
+<embed src="../graphs-common/tree-data.zh.md"></embed>
+
+### Layout
+
+缩进树布局，树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。参数如下：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 布局类型 | string | `indented` |
+| direction | 树布局的方向 | `LR` \| `RL` \| `H` | `LR` |
+| indent | 列间间距。类型为 Number 时，列间间距是固定值；类型为 Function 时，节点与根结点的间距是函数返回值 | number \| (node: NodeData) => string | 20 |
+| getWidth | 每个节点的宽度，direction 为 `H` 时有效 | (node: NodeData) => number | 默认使用节点宽度 |
+| getHeight | 每个节点的高度 | (node: NodeData) => number | 默认使用节点高度 |
+| getSide | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧 | (node: NodeData) => string | - |
+| dropCap | 每个节点的第一个自节点是否位于下一行 | boolean | true |