From ca96b84dddd0b3695313b5e877a90f05af0f8d87 Mon Sep 17 00:00:00 2001
From: pwpow <35388969+pwpow@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:48:57 +0800
Subject: [PATCH] docs: Indented layoutCfg.indent support function (#3109)

* docs: Indented layoutCfg.indent support function

We can set node's horizontal offset dynamically with function,
which allow user to create custom layout.

Closes #3081

* docs: Indented layoutCfg.indent support function

Co-authored-by: powellpeng <powellpeng@tencent.com>
---
 .../site/docs/api/treeGraphLayout/indented.en.md     | 12 +++++++++++-
 .../site/docs/api/treeGraphLayout/indented.zh.md     | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/site/docs/api/treeGraphLayout/indented.en.md b/packages/site/docs/api/treeGraphLayout/indented.en.md
index 552c9d8d912..91184acb180 100644
--- a/packages/site/docs/api/treeGraphLayout/indented.en.md
+++ b/packages/site/docs/api/treeGraphLayout/indented.en.md
@@ -23,7 +23,17 @@ Indented layout represents the hierarchy by indent between them. Each node will
 
 ### layoutCfg.indent
 
-**Type**: Number<br />**Default**: 20<br />**Required**: false<br />**Description**: Colunm separation
+**Type**: Number | Function<br />**Default**: 20<br />**Example**：
+
+```javascript
+(d) => {
+  // d is a node
+  if (d.parent?.id === 'testId') return d.parent.x + 50;
+  return 100;
+};
+```
+
+**Required**: false<br />**Description**: When the type is Number, the colunm separation is a fixed value; When the type is Function, the distance between the node and the root node is the returned value of the function.
 
 ### layoutCfg.getWidth
 
diff --git a/packages/site/docs/api/treeGraphLayout/indented.zh.md b/packages/site/docs/api/treeGraphLayout/indented.zh.md
index 2147fc08624..f4973bcfdd0 100644
--- a/packages/site/docs/api/treeGraphLayout/indented.zh.md
+++ b/packages/site/docs/api/treeGraphLayout/indented.zh.md
@@ -23,7 +23,17 @@ order: 3
 
 ### layoutCfg.indent
 
-**类型**：Number<br />**默认值**：20<br />**是否必须**：false<br />**说明**：列间间距
+**类型**：Number | Function<br />**默认值**：20<br />**示例**：
+
+```javascript
+(d) => {
+  // d 是一个节点
+  if (d.parent?.id === 'testId') return d.parent.x + 50;
+  return 100;
+};
+```
+
+**是否必须**：false<br />**说明**：类型为Number时，列间间距是固定值；类型为Function时，节点与根结点的间距是函数返回值。
 
 ### layoutCfg.getWidth