diff --git a/packages/site/docs/apis/layout/CircularLayoutOptions.en.md b/packages/site/docs/apis/layout/CircularLayoutOptions.en.md index 1136a8823b5..cc38119ee0a 100644 --- a/packages/site/docs/apis/layout/CircularLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/CircularLayoutOptions.en.md @@ -14,9 +14,7 @@ This document showcases all the configuration options for circular layout. [Circ **Default**: Calculated from the sum of node size and spacing to form the circumference. -**Required**: false - -**Description**: The radius of the circular layout. If radius is set, `startRadius` and `endRadius` will not take effect. +The radius of the circular layout. If radius is set, `startRadius` and `endRadius` will not take effect. ## center @@ -24,9 +22,7 @@ This document showcases all the configuration options for circular layout. [Circ **Default**: The center position of the container. -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## clockwise @@ -34,9 +30,7 @@ This document showcases all the configuration options for circular layout. [Circ **Default**: `true` -**Required**: false - -**Description**: Whether the layout is in clockwise direction. +Whether the layout is in clockwise direction. ## divisions @@ -44,19 +38,15 @@ This document showcases all the configuration options for circular layout. [Circ **Default**: `1` -**Required**: false - -**Description**: The number of divisions on the circumference (how many segments will be evenly distributed) when `endRadius` - `startRadius` != 0. +The number of divisions on the circumference (how many segments will be evenly distributed) when `endRadius` - `startRadius` != 0. ## ordering -**Type**: `'topology'` \| `'degree'` \| `null` +**Type**: `'topology' | 'degree' | null` **Default**: `null` -**Required**: false - -**Description**: The basis for ordering nodes on the circumference. Default `null` means using the order in the data directly. `'topology'` for topological sorting. `'degree'` for sorting by node degree. +The basis for ordering nodes on the circumference. Default `null` means using the order in the data directly. `'topology'` for topological sorting. `'degree'` for sorting by node degree. ## angleRatio @@ -64,48 +54,24 @@ This document showcases all the configuration options for circular layout. [Circ **Default**: `1` -**Required**: false - -**Description**: How many 2\*pi intervals between the first and last node. +How many 2\*pi intervals between the first and last node. ## startRadius -**Type**: `number` \| `null` +**Type**: `number | null` **Default**: `null` -**Required**: false - -**Description**: The starting radius for the spiral layout. +The starting radius for the spiral layout. ## endRadius -**Type**: `number` \| `null` +**Type**: `number | null` **Default**: `null` -**Required**: false - -**Description**: The ending radius for the spiral layout. - -## nodeSize - -**Type**: `number` \| `number`[] \| (`nodeData`: `Node`) => `number` - -**Default**: Read `data.size` from the node model, default to `10` if not available. - -**Required**: false - -**Description**: The size of each node, used to calculate the `radius` of the circular layout if radius is not specified. - -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false +The ending radius for the spiral layout. -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. + -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md b/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md index 3416b7a5f9a..013465f65d9 100644 --- a/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/CircularLayoutOptions.zh.md @@ -14,9 +14,7 @@ order: 4 **默认值**： 默认从节点大小与间距形成的周长计算而得 -**是否必须**：false - -**说明**：环形布局的半径。若设置了 `radius`，则 `startRadius` 与 `endRadius` 不生效 +环形布局的半径。若设置了 `radius`，则 `startRadius` 与 `endRadius` 不生效 ## center @@ -24,9 +22,7 @@ order: 4 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：环形布局的中心位置 +环形布局的中心位置 ## clockwise @@ -34,9 +30,7 @@ order: 4 **默认值**：`true` -**是否必须**：false - -**说明**：是否为顺时针布局 +是否为顺时针布局 ## divisions @@ -44,19 +38,15 @@ order: 4 **默认值**：`1` -**是否必须**：false - -**说明**：节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效 +节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效 ## ordering -**类型**：`'topology'` \| `'degree'` \| `null` +**类型**：`'topology' | 'degree' | null` **默认值**：`null` -**是否必须**：false - -**说明**：节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序 +节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序 ## angleRatio @@ -64,48 +54,24 @@ order: 4 **默认值**：`1` -**是否必须**：false - -**说明**：从第一个节点到最后节点之间相隔多少个 2\*PI +从第一个节点到最后节点之间相隔多少个 2\*PI ## startRadius -**类型**：`number` \| `null` +**类型**：`number | null` **默认值**：`null` -**是否必须**：false - -**说明**：螺旋状布局的起始半径 +螺旋状布局的起始半径 ## endRadius -**类型**：`number` \| `null` +**类型**：`number | null` **默认值**：`null` -**是否必须**：false - -**说明**：螺旋状布局的结束半径 - -## nodeSize - -**类型**：`number` \| `number`[] \| (`nodeData`: `Node`) => `number` - -**默认值**：读取节点数据中的 data.size，若无则默认值为 `10` - -**是否必须**：false - -**说明**： 节点占据的大小，在未指定 `radius` 时用于计算周长以得到环形布局的半径 - -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false +螺旋状布局的结束半径 -**说明**： 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 + diff --git a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md b/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md index 921e638a848..f32fca89e10 100644 --- a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md @@ -13,9 +13,7 @@ This document showcases all the configuration options for the Combo combined lay **Default**: The center of the canvas. -**Required**: false - -**Description**: The center of the layout. +The center of the layout. ## outerLayout @@ -23,8 +21,6 @@ This document showcases all the configuration options for the Combo combined lay **Default**: Force layout instance -**Required**: false - **Description**:The outer layout algorithm, default to force. See the documentation of the used layout for specific parameters. By default, the force layout uses the following parameters: ```javascript @@ -44,9 +40,7 @@ outerLayout: new G6.Extensions.ForceLayout({ **Default**: Concentric layout instance -**Required**: false - -**Description**: The inner layout algorithm for the combo. It needs to use a synchronous layout algorithm, default to concentric. See the documentation of the used layout for specific parameters. By default, the concentric layout uses the following parameters: +The inner layout algorithm for the combo. It needs to use a synchronous layout algorithm, default to concentric. See the documentation of the used layout for specific parameters. By default, the concentric layout uses the following parameters: ```javascript innerLayout: new G6.Extensions.ConcentricLayout({ @@ -56,13 +50,11 @@ innerLayout: new G6.Extensions.ConcentricLayout({ ## comboPadding -**Type**: `number` \| (`comboModel`: `ComboModel`) => `number` +**Type**: `number | (comboModel: ComboModel) => number` **Default**: `10` -**Required**: false - -**Description**: The padding value inside the combo, not used for rendering, only used for force calculation. It is recommended to set it to the same value as the combo's internal padding on the view. Example: +The padding value inside the combo, not used for rendering, only used for force calculation. It is recommended to set it to the same value as the combo's internal padding on the view. Example: ```javascript (comboModel) => { @@ -74,25 +66,15 @@ innerLayout: new G6.Extensions.ConcentricLayout({ }; ``` -## nodeSize - -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**Default**: `10` - -**Required**: false - -**Description**: The size of the node (diameter) used for collision detection. If not specified, it is calculated based on the `data.size` property in the node model. If neither is specified, the default size is `10`. + ## spacing -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` + **Default**: `0` -**Required**: false - -**Description**: `preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 +`preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 **示例**： @@ -106,14 +88,4 @@ innerLayout: new G6.Extensions.ConcentricLayout({ }; ``` -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. - -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md b/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md index 0ec3e02ad0f..58865dc4386 100644 --- a/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/ComboCombinedLayoutOptions.zh.md @@ -13,9 +13,7 @@ order: 3 **默认值**：画布中心 -**是否必须**：false - -**说明**：布局的中心 +布局的中心 ## outerLayout @@ -23,9 +21,7 @@ order: 3 **默认值**：Force 布局 -**是否必须**：false - -**说明**：最外层的布局算法，默认为 `force`。具体参数详见被使用布局的文档。默认情况下 `force` 布局将使用以下参数： +最外层的布局算法，默认为 `force`。具体参数详见被使用布局的文档。默认情况下 `force` 布局将使用以下参数： ```javascript outerLayout: new G6.Extensions.ForceLayout({ @@ -44,9 +40,7 @@ outerLayout: new G6.Extensions.ForceLayout({ **默认值**：Concentric 布局 -**是否必须**：false - -**说明**：combo 内部的布局算法，需要使用同步的布局算法，默认为 `concentric`。具体参数详见被使用布局的文档。 +combo 内部的布局算法，需要使用同步的布局算法，默认为 `concentric`。具体参数详见被使用布局的文档。 默认情况下 `concentric` 布局将使用以下参数： ```javascript @@ -57,13 +51,11 @@ innerLayout: new G6.Extensions.ConcentricLayout({ ## comboPadding -**类型**：`number` \| (`comboModel`: `ComboModel`) => `number` +**类型**：`number | (comboModel: ComboModel) => number` **默认值**：`10` -**是否必须**：false - -**说明**：Combo 内部的 padding 值，不用于渲染，仅用于计算力。推荐设置为与视图上 Combo 内部 padding 值相同的值 +Combo 内部的 padding 值，不用于渲染，仅用于计算力。推荐设置为与视图上 Combo 内部 padding 值相同的值 ```javascript (comboModel) => { @@ -75,25 +67,15 @@ innerLayout: new G6.Extensions.ConcentricLayout({ }; ``` -## nodeSize - -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**默认值**：`10` - -**是否必须**：false - -**说明**：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点数据的 `data.size` 属性计算。若即不指定，节点中也没有 `data.size`，则默认大小为 `10` + ## spacing -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` + **默认值**：`0` -**是否必须**：false - -**说明**：`preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 +`preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 **Example**: @@ -107,14 +89,4 @@ innerLayout: new G6.Extensions.ConcentricLayout({ }; ``` -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 - -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 + diff --git a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md b/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md index 21aa051e5c3..ae7abfffefb 100644 --- a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/CompactBoxLayoutOptions.en.md @@ -9,7 +9,11 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo ## direction -**Type**: String
**Options**: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
**Default**: 'LR'
**Required**: false
**Description**: The direction of layout. +**Type**: `'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` + +**Default**: `'LR'` + +The direction of layout. - TB —— Root is on the top, layout from the top to the bottom @@ -37,7 +41,9 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo ## getSide -**Type**: Function
**Example**: +**Type**: `function` + +**Example**: ```javascript (d) => { @@ -47,11 +53,15 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo }; ``` -**Default**: 'right'
**Required**: false
**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it +**Default**: `'right'` + +The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it ## getId -**Type**: Function
**Example**: +**Type**: `function` + +**Example**: ```javascript (d) => { @@ -60,11 +70,13 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo }; ``` -**Required**: false
**Description**: Sets the id for each node +Sets the id for each node ## getWidth -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -74,11 +86,13 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo }; ``` -**Required**: false
**Description**: The width of each node +The width of each node ## getHeight -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -88,11 +102,13 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo }; ``` -**Required**: false
**Description**: The height of each node +The height of each node ## getHGap -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -102,11 +118,15 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo }; ``` -**Default**: 18
**Required**: false
**Description**: The horizontal separation of nodes +**Default**: 18 + +The horizontal separation of nodes ## getVGap -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -116,10 +136,16 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo }; ``` -**Default**: 18
**Required**: false
**Description**: The vertical separation of nodes +**Default**: 18 + +The vertical separation of nodes ## radial -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:
+**Type**: `boolean` + +**Default**: `false` + +If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`: img diff --git a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md b/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md index 11db2ecbe0c..2e01e09a33e 100644 --- a/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/CompactBoxLayoutOptions.zh.md @@ -9,7 +9,11 @@ order: 13 ## direction -**类型**：String
**可选值**：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，其他选项说明 +**类型**：`'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` + +**默认值**：`'LR'` + +树布局的方向，其他选项说明 - TB —— 根节点在上，往下布局 @@ -37,7 +41,9 @@ order: 13 ## getSide -**类型**：Function
**示例**： +**类型**：`function` + +**示例**： ```javascript (d) => { @@ -47,11 +53,15 @@ order: 13 }; ``` -**默认值**：'right'
**是否必须**：false
**说明**：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 +**默认值**：'right' + +节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 ## getId -**类型**: Function
**示例**: +**类型**: `function` + +**示例**: ```javascript (d) => { @@ -60,11 +70,13 @@ order: 13 }; ``` -**是否必须**: false
**说明**: 节点 id 的回调函数 +节点 id 的回调函数 ## getWidth -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -74,11 +86,13 @@ order: 13 }; ``` -**是否必须**：false
**说明**：每个节点的宽度 +每个节点的宽度 ## getHeight -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -88,11 +102,13 @@ order: 13 }; ``` -**是否必须**：false
**说明**：每个节点的高度 +每个节点的高度 ## getHGap -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -102,11 +118,15 @@ order: 13 }; ``` -**默认值**：18
**是否必须**：false
**说明**：每个节点的水平间隙 +**默认值**：18 + +每个节点的水平间隙 ## getVGap -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -116,10 +136,16 @@ order: 13 }; ``` -**默认值**：18
**是否必须**：false
**说明**：每个节点的垂直间隙 +**默认值**：18 + +每个节点的垂直间隙 ## radial -**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： +**类型**：`boolean` + +**默认值**：false + +是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： img diff --git a/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md b/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md index 6f9959f23e3..74cc765af14 100644 --- a/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/ConcentricLayoutOptions.en.md @@ -13,9 +13,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: center position of the current container -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## height @@ -23,9 +21,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `undefined` -**Required**: false - -**Description**: The height of the layout. By default, it uses the height of the container. +The height of the layout. By default, it uses the height of the container. ## width @@ -33,39 +29,19 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `undefined` -**Required**: false - -**Description**: The width of the layout. By default, it uses the width of the container. +The width of the layout. By default, it uses the width of the container. -## preventOverlap + -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to prevent node overlap. It needs to be used together with the `nodeSize` property. Only when the `nodeSize` value is set to the same size as the current node, the collision detection for node overlap can be effectively performed. - -## nodeSize - -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**Default**: `undefined` - -**Required**: false - -**Description**: The size (diameter) of the nodes. It is used to prevent node overlap collision. + ## nodeSpacing -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` + **Default**: `10` -**Required**: false - -**Description**: The minimum spacing between rings. It is used to adjust the radius. +The minimum spacing between rings. It is used to adjust the radius. ## sortBy @@ -73,9 +49,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `undefined` -**Required**: false - -**Description**: Specifies the basis for sorting (node attribute name). The higher the value, the more centrally the node will be placed. If `undefined`, the node degree will be calculated, and the higher the degree, the more centrally the node will be placed. +Specifies the basis for sorting (node attribute name). The higher the value, the more centrally the node will be placed. If `undefined`, the node degree will be calculated, and the higher the degree, the more centrally the node will be placed. ## clockwise @@ -83,9 +57,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `false` -**Required**: false - -**Description**: Whether to arrange nodes clockwise. +Whether to arrange nodes clockwise. ## equidistant @@ -93,9 +65,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `false` -**Required**: false - -**Description**: Whether the distance between rings is equal. +Whether the distance between rings is equal. ## maxLevelDiff @@ -103,9 +73,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `undefined` -**Required**: false - -**Description**: The sum of the concentric values at each level. If `undefined`, it will be set to `maxValue / 4`, where maxValue is the maximum attribute value of the sorting basis. For example, if sortBy is `'degree'`, `maxValue` is the degree of the node with the highest degree among all nodes. +The sum of the concentric values at each level. If `undefined`, it will be set to `maxValue / 4`, where maxValue is the maximum attribute value of the sorting basis. For example, if sortBy is `'degree'`, `maxValue` is the degree of the node with the highest degree among all nodes. ## startAngle @@ -113,9 +81,7 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `3 / 2 * Math.PI` -**Required**: false - -**Description**: The starting radian for laying out nodes. +The starting radian for laying out nodes. ## sweep @@ -123,6 +89,4 @@ This document showcases all the configuration options for concentric layout. [Co **Default**: `undefined` -**Required**: false - -**Description**: The difference in radians between the first and last nodes. If `undefined`, it will be set to `2 * Math.PI * (1 - 1 / |level.nodes|)`, where level.nodes represents the nodes in each level calculated by the algorithm, and |level.nodes| represents the number of nodes in that level. +The difference in radians between the first and last nodes. If `undefined`, it will be set to `2 * Math.PI * (1 - 1 / |level.nodes|)`, where level.nodes represents the nodes in each level calculated by the algorithm, and |level.nodes| represents the number of nodes in that level. diff --git a/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md b/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md index 815cf945faf..c92e7d6ab0f 100644 --- a/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/ConcentricLayoutOptions.zh.md @@ -13,9 +13,7 @@ order: 8 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## height @@ -23,9 +21,7 @@ order: 8 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的高度，默认使用容器高度 +布局的高度，默认使用容器高度 ## width @@ -33,39 +29,19 @@ order: 8 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的宽度，默认使用容器宽度 +布局的宽度，默认使用容器宽度 -## preventOverlap + -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够有效进行节点重叠的碰撞检测 - -## nodeSize - -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**默认值**：`undefined` - -**是否必须**：false - -**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测 + ## nodeSpacing -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` + **默认值**：`10` -**是否必须**：false - -**说明**：环与环之间最小间距，用于调整半径 +环与环之间最小间距，用于调整半径 ## sortBy @@ -73,9 +49,7 @@ order: 8 **默认值**：`undefined` -**是否必须**：false - -**说明**：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 `undefined`，则会计算节点的度数，度数越高，节点将被放置得越中心 +指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 `undefined`，则会计算节点的度数，度数越高，节点将被放置得越中心 ## clockwise @@ -83,9 +57,7 @@ order: 8 **默认值**：`false` -**是否必须**：false - -**说明**：是否按照顺时针排列 +是否按照顺时针排列 ## equidistant @@ -93,9 +65,7 @@ order: 8 **默认值**：`false` -**是否必须**：false - -**说明**：环与环之间的距离是否相等 +环与环之间的距离是否相等 ## maxLevelDiff @@ -103,9 +73,7 @@ order: 8 **默认值**：`undefined` -**是否必须**：false - -**说明**：每一层同心值的求和。若为 `undefined`，则将会被设置为 `maxValue / 4` ，其中 `maxValue` 为最大的排序依据的属性值。例如，若 `sortBy` 为 `'degree'`，则 `maxValue` 为所有节点中度数最大的节点的度数 +每一层同心值的求和。若为 `undefined`，则将会被设置为 `maxValue / 4` ，其中 `maxValue` 为最大的排序依据的属性值。例如，若 `sortBy` 为 `'degree'`，则 `maxValue` 为所有节点中度数最大的节点的度数 ## startAngle @@ -113,9 +81,7 @@ order: 8 **默认值**：`3 / 2 * Math.PI` -**是否必须**：false - -**说明**：开始布局节点的弧度 +开始布局节点的弧度 ## sweep @@ -123,6 +89,4 @@ order: 8 **默认值**：`undefined` -**是否必须**：false - -**说明**：第一个节点与最后一个节点之间的弧度差。若为 `undefined` ，则将会被设置为 `2 * Math.PI * (1 - 1 / |level.nodes|) `，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量 +第一个节点与最后一个节点之间的弧度差。若为 `undefined` ，则将会被设置为 `2 * Math.PI * (1 - 1 / |level.nodes|) `，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量 diff --git a/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md b/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md index f32ad82fb36..742e5faa3b1 100644 --- a/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/D3ForceLayoutOptions.en.md @@ -11,9 +11,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `{ type: 'grid' }` -**Required**: false - -**Description**: The initial layout for force-directed layout. It will be executed before the force calculation. As the result of force-directed layout heavily depends on the initial positions of nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force algorithm to converge faster and achieve a better effect. By default, the initial layout is the result of grid layout. +The initial layout for force-directed layout. It will be executed before the force calculation. As the result of force-directed layout heavily depends on the initial positions of nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force algorithm to converge faster and achieve a better effect. By default, the initial layout is the result of grid layout. ## animated @@ -21,19 +19,9 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `false` -**Required**: false - -**Description**: Whether to enable iterative animation. Note that the force simulation of the layout is a process of force interactions. With this parameter enabled, you can see the collisions caused by the force interaction. The animated parameter of node configuration is interpolation animation, which means interpolating from the initial position to the position after layout. These two types of layouts should not be used together. - -## preventOverlap - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false +Whether to enable iterative animation. Note that the force simulation of the layout is a process of force interactions. With this parameter enabled, you can see the collisions caused by the force interaction. The animated parameter of node configuration is interpolation animation, which means interpolating from the initial position to the position after layout. These two types of layouts should not be used together. -**Description**: Whether to prevent node overlap. It needs to be used together with the `nodeSize` property or the `data.size `property in node model. Node overlap collision detection can only be effectively performed when the `nodeSize` value is set to the same size as the current node or when the `data.size` property is set in the data. + ## center @@ -41,29 +29,17 @@ This document showcases all the configuration options for D3 Force layout. **Default**: center position of the current container -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## linkDistance -**Type**: `number` \| (`model`: `EdgeModel`) => `number` +**Type**: `number | (model: EdgeModel) => number` **Default**: `50` -**Required**: false - -**Description**: The length of the edges. - -## nodeSize - -**Type**: `number` - -**Default**: `10` - -**Required**: false +The length of the edges. -**Description**:The size (diameter) of the nodes. It is used for collision detection. If not specified, it will be calculated based on the size property of the incoming nodes. If the size property is not specified in the nodes, the default size is `10`. + ## nodeSpacing @@ -71,9 +47,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `10` -**Required**: false - -**Description**: Effective when `preventOverlap` is `true`. It is the minimum value of the edge spacing when preventing overlap. It can be a callback function to set different minimum spacings for different nodes. +Effective when `preventOverlap` is `true`. It is the minimum value of the edge spacing when preventing overlap. It can be a callback function to set different minimum spacings for different nodes. **Example**: @@ -93,19 +67,15 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `-1` -**Required**: false - -**Description**: Strength of the clustering node. A negative value represents repulsion. +Strength of the clustering node. A negative value represents repulsion. ## edgeStrength -**Type**: `number` \| (`model`: `EdgeModel`) => `number` +**Type**: `number | (model: EdgeModel) => number` **Default**: `null` -**Required**: false - -**Description**: Strength of the edges. The range is from 0 to 1. By default, it adapts to the in-degree and out-degree of the nodes. +Strength of the edges. The range is from 0 to 1. By default, it adapts to the in-degree and out-degree of the nodes. ## collideStrength @@ -113,9 +83,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `1` -**Required**: false - -**Description**: Strength of preventing overlap. The range is [0, 1]. +Strength of preventing overlap. The range is [0, 1]. ## alpha @@ -123,9 +91,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `0.3` -**Required**: false - -**Description**: The convergence threshold of the current iteration. +The convergence threshold of the current iteration. ## alphaDecay @@ -133,9 +99,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `0.028` -**Required**: false - -**Description**: The decay rate of the iteration threshold. The range is [0, 1]. 0.028 corresponds to 300 iterations. +The decay rate of the iteration threshold. The range is [0, 1]. 0.028 corresponds to 300 iterations. ## alphaMin @@ -143,9 +107,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `0.001` -**Required**: false - -**Description**: The threshold to stop iteration. +The threshold to stop iteration. ## clustering @@ -153,9 +115,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `false` -**Required**: false - -**Description**: Whether to layout according to clustering information. +Whether to layout according to clustering information. ## clusterEdgeDistance @@ -163,9 +123,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `100` -**Required**: false - -**Description**: The length of the clustering edge. +The length of the clustering edge. ## clusterEdgeStrength @@ -173,9 +131,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `0.1` -**Required**: false - -**Description**: The strength of the clustering edge. +The strength of the clustering edge. ## clusterFociStrength @@ -183,9 +139,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `0.8` -**Required**: false - -**Description**: The force for foci. +The force for foci. ## clusterNodeSize @@ -193,9 +147,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `10` -**Required**: false - -**Description**:The size/diameter of clustering nodes. The larger the diameter, the more dispersed they are. +The size/diameter of clustering nodes. The larger the diameter, the more dispersed they are. ## clusterNodeStrength @@ -203,9 +155,7 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `-1` -**Required**: false - -**Description**: The strength of clustering nodes. Negative values represent repulsion. +The strength of clustering nodes. Negative values represent repulsion. ## forceSimulation @@ -213,16 +163,12 @@ This document showcases all the configuration options for D3 Force layout. **Default**: `null` -**Required**: false - -**Description**: Custom force method. If not specified, the default method from d3.js will be used. +Custom force method. If not specified, the default method from d3.js will be used. ## onTick -**Type**: `Function` +**Type**: `function` **Default**: In G6, if `animated` is `true`, it calls the logic to update the rendering position of nodes on the canvas in each iteration callback. -**Required**: false - -**Description**: Callback function for each iteration. The return value is the layout result for that iteration. +Callback function for each iteration. The return value is the layout result for that iteration. diff --git a/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md b/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md index df9bece27a3..77cb5538364 100644 --- a/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/D3ForceLayoutOptions.zh.md @@ -11,9 +11,7 @@ order: 11 **默认值**：`{ type: 'grid' }` -**是否必须**：false - -**说明**：力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 +力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 ## animated @@ -21,19 +19,9 @@ order: 11 **默认值**：`false` -**是否必须**：false - -**说明**：是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配置 - -## preventOverlap - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false +是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配置 -**说明**：是否防止重叠，必须配合下面属性 nodeSize 或节点数据中的 `data.size` 属性，只有在数据中设置了 `data.size` 或在该布局中配置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 + ## center @@ -41,29 +29,17 @@ order: 11 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## linkDistance -**类型**：`number` \| (`model`: `EdgeModel`) => `number` +**类型**：`number | (model: EdgeModel) => number` **默认值**：`50` -**是否必须**：false - -**说明**：边长度 - -## nodeSize - -**类型**：`number` - -**默认值**：`10` - -**是否必须**：false +边长度 -**说明**：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，节点中也没有 `size`，则默认大小为 `10` + ## nodeSpacing @@ -71,9 +47,7 @@ order: 11 **默认值**：`10` -**是否必须**：false - -**说明**：`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距 +`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距 **示例**： @@ -93,19 +67,15 @@ order: 11 **默认值**：`-1` -**是否必须**：false - -**说明**：聚类节点作用力。负数代表斥力 +聚类节点作用力。负数代表斥力 ## edgeStrength -**类型**：`number` \| (`model`: `EdgeModel`) => `number` +**类型**：`number | (model: EdgeModel) => number` **默认值**：`null` -**是否必须**：false - -**说明**：边的作用力，范围是 0 到 1，默认根据节点的出入度自适应 +边的作用力，范围是 0 到 1，默认根据节点的出入度自适应 ## collideStrength @@ -113,9 +83,7 @@ order: 11 **默认值**：`1` -**是否必须**：false - -**说明**：防止重叠的力强度，范围 [0, 1] +防止重叠的力强度，范围 [0, 1] ## alpha @@ -123,9 +91,7 @@ order: 11 **默认值**：`0.3` -**是否必须**：false - -**说明**：当前的迭代收敛阈值 +当前的迭代收敛阈值 ## alphaDecay @@ -133,9 +99,7 @@ order: 11 **默认值**：`0.028` -**是否必须**：false - -**说明**：迭代阈值的衰减率。范围 [0, 1]。0.028 对应迭代数为 300 +迭代阈值的衰减率。范围 [0, 1]。0.028 对应迭代数为 300 ## alphaMin @@ -143,9 +107,7 @@ order: 11 **默认值**：`0.001` -**是否必须**：false - -**说明**：停止迭代的阈值 +停止迭代的阈值 ## clustering @@ -153,9 +115,7 @@ order: 11 **默认值**：`false` -**是否必须**：false - -**说明**：是否按照聚类信息布局 +是否按照聚类信息布局 ## clusterEdgeDistance @@ -163,9 +123,7 @@ order: 11 **默认值**：`100` -**是否必须**：false - -**说明**：聚类边长度 +聚类边长度 ## clusterEdgeStrength @@ -173,9 +131,7 @@ order: 11 **默认值**：`0.1` -**是否必须**：false - -**说明**：聚类边作用力 +聚类边作用力 ## clusterFociStrength @@ -183,9 +139,7 @@ order: 11 **默认值**：`0.8` -**是否必须**：false - -**说明**：用于 foci 的力 +用于 foci 的力 ## clusterNodeSize @@ -193,9 +147,7 @@ order: 11 **默认值**：`10` -**是否必须**：false - -**说明**：聚类节点大小 / 直径，直径越大，越分散 +聚类节点大小 / 直径，直径越大，越分散 ## clusterNodeStrength @@ -203,9 +155,7 @@ order: 11 **默认值**：`-1` -**是否必须**：false - -**说明**：聚类节点作用力。负数代表斥力 +聚类节点作用力。负数代表斥力 ## forceSimulation @@ -213,16 +163,12 @@ order: 11 **默认值**：`null` -**是否必须**：false - -**说明**：自定义 force 方法，若不指定，则使用 d3.js 的方法 +自定义 force 方法，若不指定，则使用 d3.js 的方法 ## onTick -**类型**：`Function` +**类型**：`function` **默认值**：在 G6 中使用，若 `animated: true` 则在每次迭代的回调中调用更新画布上节点渲染位置的逻辑 -**是否必须**：false - -**说明**：每一次迭代的回调函数，返回值为这一次迭代的布局结果 +每一次迭代的回调函数，返回值为这一次迭代的布局结果 diff --git a/packages/site/docs/apis/layout/DagreLayoutOptions.en.md b/packages/site/docs/apis/layout/DagreLayoutOptions.en.md index 258191378b0..1e76bc1e910 100644 --- a/packages/site/docs/apis/layout/DagreLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/DagreLayoutOptions.en.md @@ -18,19 +18,15 @@ You can specify the layer of nodes by configuring the `data.layer` field in the **Default**: `undefined` -**Required**: false - -**Description**: The top-left alignment position of the layout. +The top-left alignment position of the layout. ## rankdir -**Type**: `'TB'` | `'BT'` | `'LR'` | `'RL'` +**Type**: `'TB' | 'BT' | 'LR' | 'RL'` **Default**: `'TB'` -**Required**: false - -**Description**: The direction of the layout. T: top; B: bottom; L: left; R: right. +The direction of the layout. T: top; B: bottom; L: left; R: right. - `'TB'`: Top to bottom layout; - `'BT'`: Bottom to top layout; @@ -39,13 +35,11 @@ You can specify the layer of nodes by configuring the `data.layer` field in the ## align -**Type**: `'UL'` | `'UR'` | `'DL'` | `'DR'` | undefined +**Type**: `'UL' | 'UR' | 'DL' | 'DR' | undefined` **Default**: `'UL'` -**Required**: false - -**Description**: The alignment of nodes. U: upper; D: down; L: left; R: right. +The alignment of nodes. U: upper; D: down; L: left; R: right. - `'UL'`: Align to the upper left corner; - `'UR'`: Align to the upper right corner; @@ -53,15 +47,7 @@ You can specify the layer of nodes by configuring the `data.layer` field in the - `'DR'`: Align to the lower right corner; - `undefined`: Default, center alignment. -## nodeSize - -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**Default**: Takes the `data.size` value from the node model by default, or uses `10` if it is not available. - -**Required**: false - -**Description**: The size of each node, used to calculate the space occupied by each node. + ## nodesep @@ -69,19 +55,15 @@ You can specify the layer of nodes by configuring the `data.layer` field in the **Default**: `50` -**Required**: false - -**Description**: The spacing between nodes (in pixels). It represents the horizontal spacing between nodes when `rankdir` is `'TB'` or `'BT'`, and the vertical spacing between nodes when `rankdir` is `'LR'` or `'RL'`. `nodesepFunc` has a higher priority. +The spacing between nodes (in pixels). It represents the horizontal spacing between nodes when `rankdir` is `'TB'` or `'BT'`, and the vertical spacing between nodes when `rankdir` is `'LR'` or `'RL'`. `nodesepFunc` has a higher priority. ## nodesepFunc -**Type**: (`nodeModel`: `NodeModel`) => `number` +**Type**: `(nodeModel: NodeModel) => number` **Default**: undefined -**Required**: false - -**Description**: The spacing between nodes (in pixels). It represents the horizontal spacing between nodes when `rankdir` is `'TB'` or `'BT'`, and the vertical spacing between nodes when `rankdir` is `'LR'` or `'RL'`. It has a higher priority than `nodesep`, which means that if `nodesepFunc` is set, `nodesep` will not take effect. +The spacing between nodes (in pixels). It represents the horizontal spacing between nodes when `rankdir` is `'TB'` or `'BT'`, and the vertical spacing between nodes when `rankdir` is `'LR'` or `'RL'`. It has a higher priority than `nodesep`, which means that if `nodesepFunc` is set, `nodesep` will not take effect. **Example**: @@ -99,19 +81,15 @@ You can specify the layer of nodes by configuring the `data.layer` field in the **Default**: `50` -**Required**: false - -**Description**: The spacing between layers (in pixels). It represents the vertical spacing between adjacent layers when `rankdir` is `'TB'` or `'BT'`, and the horizontal spacing between adjacent layers when `rankdir` is `'LR'` or `'RL'`. `ranksepFunc` has a higher priority. +The spacing between layers (in pixels). It represents the vertical spacing between adjacent layers when `rankdir` is `'TB'` or `'BT'`, and the horizontal spacing between adjacent layers when `rankdir` is `'LR'` or `'RL'`. `ranksepFunc` has a higher priority. ## ranksepFunc -**Type**: (`nodeModel`: `NodeModel`) => `number` +**Type**: `(nodeModel: NodeModel) => number` **Default**: `undefined` -**Required**: false - -**Description**: The spacing between layers (in pixels). It represents the vertical spacing between adjacent layers when `rankdir` is `'TB'` or `'BT'`, and the horizontal spacing between adjacent layers when `rankdir` is `'LR'` or `'RL'`. It takes precedence over `nodesep`, which means that if `ranksepFunc` is set, `nodesep` will not take effect. +The spacing between layers (in pixels). It represents the vertical spacing between adjacent layers when `rankdir` is `'TB'` or `'BT'`, and the horizontal spacing between adjacent layers when `rankdir` is `'LR'` or `'RL'`. It takes precedence over `nodesep`, which means that if `ranksepFunc` is set, `nodesep` will not take effect. **Example**: @@ -129,30 +107,33 @@ You can specify the layer of nodes by configuring the `data.layer` field in the **Default**: `false` -**Required**: false - -**Description**: Whether to calculate the control point positions on edges. It only works when the built-in polyline (`type: 'polyline-edge'`) is used in edge configuration, or any edge that consumes `data.controlPoints` as control point positions. Essentially, it adds `data.controlPoints` to the edge data. +Whether to calculate the control point positions on edges. It only works when the built-in polyline (`type: 'polyline-edge'`) is used in edge configuration, or any edge that consumes `data.controlPoints` as control point positions. Essentially, it adds `data.controlPoints` to the edge data. ## preset -**Type**: +**Type**: `preset` + +
+ + preset + ```typescript -{ +type preset = { nodes: { - x: number, // position - y: number, // position - layer?: number, // specify layer - _order?: number // if it is the output of the previous dagre layout, there is this field, representing the order of the nodes in the same layer - }[] -} + x: number; // position + y: number; // position + layer?: number; // specify layer + _order?: number; // if it is the output of the previous dagre layout, there is this field, representing the order of the nodes in the same layer + }[]; +}; ``` -**Default**: undefined +
-**Required**: false +**Default**: undefined -**Description**: The reference node positions used in layout calculation. It is generally used to ensure the continuity of re-layout when switching data. In G6, if the data is updated, the existing layout result data will be automatically used as input. +The reference node positions used in layout calculation. It is generally used to ensure the continuity of re-layout when switching data. In G6, if the data is updated, the existing layout result data will be automatically used as input. ## nodeOrder @@ -160,9 +141,7 @@ You can specify the layer of nodes by configuring the `data.layer` field in the **Default**: `false` -**Required**: false - -**Description**: An array that serves as a reference for the order of nodes in the same layer. It stores node id values. If not specified, the nodes in the same layer will be arranged according to the mechanism of dagre itself. +An array that serves as a reference for the order of nodes in the same layer. It stores node id values. If not specified, the nodes in the same layer will be arranged according to the mechanism of dagre itself. ## sortByCombo @@ -170,18 +149,6 @@ You can specify the layer of nodes by configuring the `data.layer` field in the **Default**: `false` -**Required**: false - -**Description**: Suggested to be configured when there are Combos. Whether to sort the nodes in the same layer based on the `parentId` in each node data to avoid overlapping of Combos. - -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. +Suggested to be configured when there are Combos. Whether to sort the nodes in the same layer based on the `parentId` in each node data to avoid overlapping of Combos. -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md b/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md index 41e3a5a8110..82add08a40a 100644 --- a/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/DagreLayoutOptions.zh.md @@ -18,19 +18,15 @@ order: 2 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的左上角对齐位置 +布局的左上角对齐位置 ## rankdir -**类型**：`'TB'` | `'BT'` | `'LR'` | `'RL'` +**类型**：`'TB' | 'BT' | 'LR' | 'RL'` **默认值**：`'TB'` -**是否必须**：false - -**说明**：布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。 +布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。 - `'TB'`：从上至下布局； - `'BT'`：从下至上布局； @@ -39,13 +35,11 @@ order: 2 ## align -**类型**：`'UL'` | `'UR'` | `'DL'` | `'DR'` | undefined +**类型**：`'UL' | 'UR' | 'DL' | 'DR' | undefined` **默认值**：`'UL'` -**是否必须**：false - -**说明**：节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右） +节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右） - 'UL'：对齐到左上角； - 'UR'：对齐到右上角； @@ -53,15 +47,7 @@ order: 2 - 'DR'：对齐到右下角； - undefined：默认，中间对齐。 -## nodeSize - -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**默认值**：默认取节点中的 `data.size` 值，若无此值则使用 `10` - -**是否必须**：false - -**说明**：每个节点的大小，用于计算每个节点占据的空间 + ## nodesep @@ -69,19 +55,15 @@ order: 2 **默认值**：`50` -**是否必须**：false - -**说明**：节点间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是节点的水平间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直方向间距。`nodesepFunc` 拥有更高的优先级 +节点间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是节点的水平间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直方向间距。`nodesepFunc` 拥有更高的优先级 ## nodesepFunc -**类型**：(`nodeModel`: `NodeModel`) => `number` +**类型**：`(nodeModel: NodeModel) => number` **默认值**：undefined -**是否必须**：false - -**说明**：节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是节点的水平间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直方向间距。优先级高于 `nodesep`，即若设置了 `nodesepFunc`，则 `nodesep` 不生效 +节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是节点的水平间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直方向间距。优先级高于 `nodesep`，即若设置了 `nodesepFunc`，则 `nodesep` 不生效 **示例**： @@ -99,19 +81,15 @@ order: 2 **默认值**：`50` -**是否必须**：false - -**说明**：层间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。`ranksepFunc` 拥有更高的优先级 +层间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。`ranksepFunc` 拥有更高的优先级 ## ranksepFunc -**类型**：(`nodeModel`: `NodeModel`) => `number` +**类型**：`(nodeModel: NodeModel) => number` **默认值**：`undefined` -**是否必须**：false - -**说明**：层间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。优先级高于 `nodesep`，即若设置了 `nodesepFunc`，则 `nodesep` 不生效 +层间距（px）。在 `rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。优先级高于 `nodesep`，即若设置了 `nodesepFunc`，则 `nodesep` 不生效 **示例**： @@ -129,16 +107,19 @@ order: 2 **默认值**：`false` -**是否必须**：false - -**说明**：是否同时计算边上的的控制点位置，仅在边配置中使用了内置折线（`type: 'polyline-edge'`） 时，或任何将自定义消费了 `data.controlPoints` 字段作为控制点位置的边时生效。本质上就是给边数据增加了 `data.controlPoints` +是否同时计算边上的的控制点位置，仅在边配置中使用了内置折线（`type: 'polyline-edge'`） 时，或任何将自定义消费了 `data.controlPoints` 字段作为控制点位置的边时生效。本质上就是给边数据增加了 `data.controlPoints` ## preset -**类型**： +**类型**：`prest` +
+ + prest + + ```typescript -{ +type preset = { nodes: { x: number, // 位置 y: number, // 位置 @@ -147,12 +128,11 @@ order: 2 }[] } ``` +
**默认值**：undefined -**是否必须**：false - -**说明**：布局计算时参考的节点位置，一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入。 +布局计算时参考的节点位置，一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入。 ## nodeOrder @@ -160,9 +140,7 @@ order: 2 **默认值**：`false` -**是否必须**：false - -**说明**：同层节点顺序的参考数组，存放节点 id 值。若未指定，则将按照 dagre 本身机制排列同层节点顺序。 +同层节点顺序的参考数组，存放节点 id 值。若未指定，则将按照 dagre 本身机制排列同层节点顺序。 ## sortByCombo @@ -170,18 +148,6 @@ order: 2 **默认值**：`false` -**是否必须**：false - -**说明**：建议在有 Combo 的情况下配置，同一层节点是否根据每个节点数据中的 `parentId` 进行排序，以防止 Combo 重叠 - -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +建议在有 Combo 的情况下配置，同一层节点是否根据每个节点数据中的 `parentId` 进行排序，以防止 Combo 重叠 -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 + diff --git a/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md b/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md index 8bbe0caafc8..4f28ee4a6f9 100644 --- a/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/DendrogramLayoutOptions.en.md @@ -9,7 +9,11 @@ order: 14 ## direction -**Type**: String
**Options**: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
**Default**: 'LR'
**Required**: false
**Description**: The direction of layout. +**Type**: `'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` + +**Default**: `'LR'` + +The direction of layout. - TB —— Root is on the top, layout from the top to the bottom @@ -37,12 +41,26 @@ order: 14 ## nodeSep -**Type**: Number
**Default**: 0
**Required**: false
**Description**: Node separation +**Type**: `number` + +**Default**: `0` + +Node separation ## rankSep -**Type**: Number
**Default**: 0
**Required**: false
**Description**: Level separation +**Type**: `number` + +**Default**: `0` + +Level separation ## radial -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Wheter layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:
img +**Type**: `boolean` + +**Default**: `false` + +Wheter layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`: + +img diff --git a/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md b/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md index 7ee18ba1fd8..ff9ea29f384 100644 --- a/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/DendrogramLayoutOptions.zh.md @@ -9,7 +9,11 @@ order: 14 ## direction -**类型**：String
**可选值**：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，默认为 `'LR'`，其他选项说明 +**类型**：`'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'` + +**默认值**：`'LR'` + +树布局的方向，默认为 `'LR'`，其他选项说明 - TB —— 根节点在上，往下布局 @@ -37,14 +41,26 @@ order: 14 ## nodeSep -**类型**：Number
**默认值**：0
**是否必须**：false
**说明**：节点间距 +**类型**：`number` + +**默认值**：0 + +节点间距 ## rankSep -**类型**：Number
**默认值**：0
**是否必须**：false
**说明**：层与层之间的间距 +**类型**：`number` + +**默认值**：0 + +层与层之间的间距 ## radial -**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： +**类型**：`boolean` + +**默认值**：false + +是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： img diff --git a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md b/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md index 5ecda6ba9a5..b84bc8dc64e 100644 --- a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md +++ b/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.en.md @@ -13,9 +13,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `{ type: 'grid' }` -**Required**: false - -**Description**: The initial layout for the force-directed layout. It will be applied before the force calculation. Since the result of the force-directed layout heavily depends on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force algorithm to converge faster and achieve better results. By default, the initialization of the force-directed layout is the result of the grid layout. +The initial layout for the force-directed layout. It will be applied before the force calculation. Since the result of the force-directed layout heavily depends on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force algorithm to converge faster and achieve better results. By default, the initialization of the force-directed layout is the result of the grid layout. ## center @@ -23,9 +21,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: The center of the current container -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## dimensions @@ -33,9 +29,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `2` -**Required**: false - -**Description**: The dimensions of the layout. Set it to `2` for 2D rendering, or set it to `3` for 3D rendering to calculate the layout in the z-axis. +The dimensions of the layout. Set it to `2` for 2D rendering, or set it to `3` for 3D rendering to calculate the layout in the z-axis. ## height @@ -43,9 +37,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `undefined` -**Required**: false - -**Description**: The height of the layout. By default, the height of the container will be used. +The height of the layout. By default, the height of the container will be used. ## width @@ -53,9 +45,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `undefined` -**Required**: false - -**Description**: The width of the layout. By default, the width of the container will be used. +The width of the layout. By default, the width of the container will be used. ## maxIteration @@ -63,29 +53,11 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `0` -**Required**: false - -**Description**: The maximum number of iterations. If set to `0`, it will be adjusted automatically. - -## preventOverlap - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to prevent node overlap. - -## nodeSize - -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**Default**: `undefined` +The maximum number of iterations. If set to `0`, it will be adjusted automatically. -**Required**: false + -**Description**: The size (diameter) of nodes. It is used for collision detection when preventing node overlap. + ## barnesHut @@ -93,9 +65,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `undefined` -**Required**: false - -**Description**: Whether to enable Barnes-Hut acceleration, which is quadtree acceleration. Since the quadtree needs to be updated at each iteration, it is recommended to enable it on large-scale graphs. By default, it is undefined, and it will be activated when the number of nodes exceeds 250. Setting it to `false` will not automatically activate it. +Whether to enable Barnes-Hut acceleration, which is quadtree acceleration. Since the quadtree needs to be updated at each iteration, it is recommended to enable it on large-scale graphs. By default, it is undefined, and it will be activated when the number of nodes exceeds 250. Setting it to `false` will not automatically activate it. ## dissuadeHubs @@ -103,9 +73,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `false` -**Required**: false - -**Description**: Whether to enable the hub mode. If `true`, nodes with higher in-degrees will be placed at the center with higher priority compared to nodes with higher out-degrees. +Whether to enable the hub mode. If `true`, nodes with higher in-degrees will be placed at the center with higher priority compared to nodes with higher out-degrees. ## prune @@ -113,9 +81,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `undefined` -**Required**: false - -**Description**: Whether to enable automatic pruning mode. By default, it is `undefined`, and it will be activated when the number of nodes exceeds 100. Note that pruning can improve convergence speed but may reduce the quality of the graph layout. Setting it to `false` will not automatically activate it. +Whether to enable automatic pruning mode. By default, it is `undefined`, and it will be activated when the number of nodes exceeds 100. Note that pruning can improve convergence speed but may reduce the quality of the graph layout. Setting it to `false` will not automatically activate it. ## tao @@ -123,9 +89,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `0.1` -**Required**: false - -**Description**: The tolerance for stopping oscillations when the iteration is close to convergence. +The tolerance for stopping oscillations when the iteration is close to convergence. ## kg @@ -133,9 +97,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `5` -**Required**: false - -**Description**: The gravity coefficient. The larger the kg, the more the layout will be concentrated in the center. +The gravity coefficient. The larger the kg, the more the layout will be concentrated in the center. ## kr @@ -143,9 +105,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `5` -**Required**: false - -**Description**: The repulsion coefficient, which can be used to adjust the compactness of the layout. The larger the `kr`, the looser the layout. +The repulsion coefficient, which can be used to adjust the compactness of the layout. The larger the `kr`, the looser the layout. ## ks @@ -153,9 +113,7 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `0.1` -**Required**: false - -**Description**: Controls the speed of node movement during iteration. +Controls the speed of node movement during iteration. ## ksmax @@ -163,38 +121,22 @@ This article showcases all the configuration options for the ForceAtlas2 force-d **Default**: `10` -**Required**: false - -**Description**: The upper limit of the maximum node movement speed during iteration. +The upper limit of the maximum node movement speed during iteration. ## mode -**Type**: `"normal"` \| `"linlog"` - -**Default**: `"normal"` +**Type**: `'normal' | 'linlog'` -**Required**: false +**Default**: `'normal'` -**Description**: In `'linlog'` mode, clustering will be more compact. +In `'linlog'` mode, clustering will be more compact. ## onTick -**Type**: `Function` +**Type**: `function` **Default**: `undefined` -**Required**: false - -**Description**: The callback function for each iteration. The return value is the layout result for this iteration. - -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. +The callback function for each iteration. The return value is the layout result for this iteration. -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md b/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md index 4928c33c877..31e26777869 100644 --- a/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/ForceAtlas2LayoutOptions.zh.md @@ -13,9 +13,7 @@ order: 9 **默认值**：`{ type: 'grid' }` -**是否必须**：false - -**说明**：力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 +力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 ## center @@ -23,9 +21,7 @@ order: 9 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## dimensions @@ -33,9 +29,7 @@ order: 9 **默认值**：`2` -**是否必须**：false - -**说明**：布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局 +布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局 ## height @@ -43,9 +37,7 @@ order: 9 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的高度，默认使用容器高度 +布局的高度，默认使用容器高度 ## width @@ -53,9 +45,7 @@ order: 9 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的宽度，默认使用容器宽度 +布局的宽度，默认使用容器宽度 ## maxIteration @@ -63,29 +53,11 @@ order: 9 **默认值**：`0` -**是否必须**：false - -**说明**：最大迭代次数，若为 `0` 则将自动调整 - -## preventOverlap - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否防止节点重叠 - -## nodeSize - -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**默认值**：`undefined` +最大迭代次数，若为 `0` 则将自动调整 -**是否必须**：false + -**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测 + ## barnesHut @@ -93,9 +65,7 @@ order: 9 **默认值**：`undefined` -**是否必须**：false - -**说明**：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开。默认情况下为 undefined，当节点数量大于 250 时它将会被激活。设置为 `false` 则不会自动被激活 +是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开。默认情况下为 undefined，当节点数量大于 250 时它将会被激活。设置为 `false` 则不会自动被激活 ## dissuadeHubs @@ -103,9 +73,7 @@ order: 9 **默认值**：`false` -**是否必须**：false - -**说明**：是否打开 hub 模式。若为 `true`，相比与出度大的节点，入度大的节点将会有更高的优先级被放置在中心位置 +是否打开 hub 模式。若为 `true`，相比与出度大的节点，入度大的节点将会有更高的优先级被放置在中心位置 ## prune @@ -113,9 +81,7 @@ order: 9 **默认值**：`undefined` -**是否必须**：false - -**说明**：是否开启自动剪枝模式。默认情况下为 `undefined`，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量。设置为 `false` 则不会自动被激活 +是否开启自动剪枝模式。默认情况下为 `undefined`，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量。设置为 `false` 则不会自动被激活 ## tao @@ -123,9 +89,7 @@ order: 9 **默认值**：`0.1` -**是否必须**：false - -**说明**：迭代接近收敛时停止震荡的容忍度 +迭代接近收敛时停止震荡的容忍度 ## kg @@ -133,9 +97,7 @@ order: 9 **默认值**：`5` -**是否必须**：false - -**说明**：重力系数。kg 越大，布局越聚集在中心 +重力系数。kg 越大，布局越聚集在中心 ## kr @@ -143,9 +105,7 @@ order: 9 **默认值**：`5` -**是否必须**：false - -**说明**：斥力系数，可用于调整布局的紧凑程度。kr 越大，布局越松散 +斥力系数，可用于调整布局的紧凑程度。kr 越大，布局越松散 ## ks @@ -153,9 +113,7 @@ order: 9 **默认值**：`0.1` -**是否必须**：false - -**说明**：控制迭代过程中，节点移动的速度 +控制迭代过程中，节点移动的速度 ## ksmax @@ -163,38 +121,22 @@ order: 9 **默认值**：`10` -**是否必须**：false - -**说明**：迭代过程中，最大的节点移动的速度上限 +迭代过程中，最大的节点移动的速度上限 ## mode -**类型**：`"normal"` \| `"linlog"` - -**默认值**：`"normal"` +**类型**：`'normal' | 'linlog'` -**是否必须**：false +**默认值**：`'normal'` -**说明**：`'linlog'` 模式下，聚类将更加紧凑 +`'linlog'` 模式下，聚类将更加紧凑 ## onTick -**类型**：`Function` +**类型**：`function` **默认值**：`undefined` -**是否必须**：false - -**说明**：每一次迭代的回调函数，返回值为这一次迭代的布局结果 - -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +每一次迭代的回调函数，返回值为这一次迭代的布局结果 -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 + diff --git a/packages/site/docs/apis/layout/ForceLayoutOptions.en.md b/packages/site/docs/apis/layout/ForceLayoutOptions.en.md index 51ddc894c4e..39de66e2629 100644 --- a/packages/site/docs/apis/layout/ForceLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/ForceLayoutOptions.en.md @@ -14,9 +14,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `{ type: 'grid' }` -**Required**: false - -**Description**: The initial layout of the force-directed layout. It will be executed before the force-directed calculation. Since the result of the force-directed layout depends heavily on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, making the force-directed algorithm converge faster and have better results. By default, the initialization of the force-directed layout is the result of the grid layout. +The initial layout of the force-directed layout. It will be executed before the force-directed calculation. Since the result of the force-directed layout depends heavily on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, making the force-directed algorithm converge faster and have better results. By default, the initialization of the force-directed layout is the result of the grid layout. ## animated @@ -24,9 +22,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `false` -**Required**: false - -**Description**: Whether to enable animation for each iteration. Note that the force-directed layout simulates the process of force interaction, and enabling this option allows you to see the collision process caused by force. The animates property in the node configuration is for interpolated animation, which means it interpolates from the initial position to the position after the layout. These two types of layouts should not be used together. +Whether to enable animation for each iteration. Note that the force-directed layout simulates the process of force interaction, and enabling this option allows you to see the collision process caused by force. The animates property in the node configuration is for interpolated animation, which means it interpolates from the initial position to the position after the layout. These two types of layouts should not be used together. ## gravity @@ -34,29 +30,23 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `10` -**Required**: false - -**Description**: The strength of the center force that attracts all nodes to the `center`. The larger the value, the more compact the layout. +The strength of the center force that attracts all nodes to the `center`. The larger the value, the more compact the layout. ## center -**Type**: `[number, number]` +**Type**: [number, number]` **Default**: The center position of the current container -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## getCenter -**Type**: (`model`: `NodeModel`) => `number` +**Type**: `(model: NodeModel) => number` **Default**: `undefined` -**Required**: false - -**Description**: The callback function for the center forces (x, y, and strength) of each node. If not specified, there is no additional center force. +The callback function for the center forces (x, y, and strength) of each node. If not specified, there is no additional center force. **Example**: @@ -69,65 +59,41 @@ This document shows all the options for force-directed layout. [Force-Directed L }; ``` -## preventOverlap - -**Type**: `boolean` - -**Default**: `true` - -**Required**: false - -**Description**: Whether to prevent node overlap. It must be used with the `nodeSize` property below or the `data.size` property in the node model. Node overlap collision detection can only be performed if the `data.size` is set in the data or the `nodeSize` value that is the same as the current graph node size is configured in this layout. - -## nodeSize - -**Type**: `number` \| `number`[] \| (`model`: `NodeModel`) => `number` + -**Default**: Read the `data.size` from the node model. If not available, the default value is `10`. - -**Required**: false - -**Description**: The size (diameter) of the node. Used for collision detection. + ## nodeSpacing -**Type**: `number` \| `number`[] \| (`model`: `NodeModel`) => `number` +**Type**: `number | number[] | (model: NodeModel) => number` **Default**: `10` -**Required**: false - -**Description**: Effective only when `preventOverlap` is `true`. The minimum edge spacing between nodes to prevent overlap. It can be a callback function to set different minimum spacing for different nodes. +Effective only when `preventOverlap` is `true`. The minimum edge spacing between nodes to prevent overlap. It can be a callback function to set different minimum spacing for different nodes. ## linkDistance -**Type**: `number` \| (`model`: `EdgeModel`) => `number` +**Type**: `number | (model: NodeModel) => number` **Default**: `200` -**Required**: false - -**Description**: The ideal length of the edge, which can be understood as the length of the spring when it is not under force. +The ideal length of the edge, which can be understood as the length of the spring when it is not under force. ## nodeStrength -**Type**: `number` \| (`model`: `NodeModel`) => `number` +**Type**: `number | (model`: `NodeModel`) => number` **Default**: `1000` -**Required**: false - -**Description**: The strength of the interaction between nodes. A positive value represents the repulsive force between nodes, and a negative value represents the attractive force between nodes. +The strength of the interaction between nodes. A positive value represents the repulsive force between nodes, and a negative value represents the attractive force between nodes. ## edgeStrength -**Type**: `number` \| (`model`: `EdgeModel`) => `number` +**Type**: `number | (model: NodeModel) => number` **Default**: `200` -**Required**: false - -**Description**: The strength (attraction) of the edge +The strength (attraction) of the edge ## maxSpeed @@ -135,9 +101,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `1000` -**Required**: false - -**Description**: The maximum moving distance per iteration +The maximum moving distance per iteration ## factor @@ -145,9 +109,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `1` -**Required**: false - -**Description**: The repulsion factor. The larger the value, the stronger the repulsion +The repulsion factor. The larger the value, the stronger the repulsion ## coulombDisScale @@ -155,19 +117,15 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `0.05` -**Required**: false - -**Description**: The Coulomb coefficient, a coefficient for the repulsion force. The larger the value, the stronger the repulsion between nodes +The Coulomb coefficient, a coefficient for the repulsion force. The larger the value, the stronger the repulsion between nodes ## getMass -**Type**: (`model`: `NodeModel`) => `number` +**Type**: (model: NodeModel) => number` **Default**: In G6, the mass of existing nodes in incremental layout will be increased to maintain the stability of existing content. For other cases, the mass of the node is `1` -**Required**: false - -**Description**: The callback function for the mass of each node. The parameter is the internal data model of the node, and the return value is the mass value +The callback function for the mass of each node. The parameter is the internal data model of the node, and the return value is the mass value ## minMovement @@ -175,19 +133,15 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `0.4` -**Required**: false - -**Description**: Stop the iterations when the average/max/min (determined by `distanceThresholdMode`) movement distance in one iteration is less than this value. The smaller the value, the more the layout converges and the longer the time it takes +Stop the iterations when the average/max/min (determined by `distanceThresholdMode`) movement distance in one iteration is less than this value. The smaller the value, the more the layout converges and the longer the time it takes ## distanceThresholdMode -**Type**: `'mean'`\|`'max'`\｜`'min'` +**Type**: `'mean' | 'max' | 'min'` **Default**: `'mean'` -**Required**: false - -**Description**: The condition for using `minMovement`. `'mean'` means stop the iterations when the average movement distance is less than `minMovement`. `'max'`/`'min'` means stop the iterations when the maximum/minimum movement distance is less than `minMovement`. The smaller the value, the more the layout converges and the longer the time it takes +The condition for using `minMovement`. `'mean'` means stop the iterations when the average movement distance is less than `minMovement`. `'max'`/`'min'` means stop the iterations when the maximum/minimum movement distance is less than `minMovement`. The smaller the value, the more the layout converges and the longer the time it takes ## maxIteration @@ -195,9 +149,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `1000` -**Required**: false - -**Description**: The maximum number of iterations. If the number of iterations exceeds this value but the average movement distance is still less than minMovement, the iterations will be forced to stop +The maximum number of iterations. If the number of iterations exceeds this value but the average movement distance is still less than minMovement, the iterations will be forced to stop ## damping @@ -205,9 +157,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `0.9` -**Required**: false - -**Description**: The damping coefficient. The value range is [0, 1]. The larger the value, the slower the speed decreases +The damping coefficient. The value range is [0, 1]. The larger the value, the slower the speed decreases ## interval @@ -215,26 +165,51 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `0.02` -**Required**: false - -**Description**: Controls the moving speed of each node in each iteration +Controls the moving speed of each node in each iteration ## centripetalOptions -**Type**: `CentripetalOptions` (see table below) +**Type**: `CentripetalOptions` + +
+ + CentripetalOptions + + +```ts +type CentripetalOptions = { + /** the center force strength for discrete nodes (with 0 degree) */ + single?: number | ((model: NodeModel) => number); + /** the center force strength for leaf nodes (with 1 degree) */ + leaf?: number | ((model: NodeModel) => number); + /** the center force strength for other nodes beside leaf and discrete nodes */ + others?: number | ((model: NodeModel) => number); + /** the center force's coordinate. You can return different values for different nodes */ + center?: (model: NodeModel) => { x: number; y: number }; +}; +``` + +
+ +**Default**: `object` -**Default**: (see table below) +
+ + object + -**Required**: false +```json +{ + "single": 2, + "leaf": 2, + "others": 1, + "center": // center of the graph +} +``` -**Description**: Centripetal force configuration, including the centripetal center and the strength of the centripetal force for leaf nodes, discrete nodes, and other nodes +
-| Parameter | Type | Example | Default | Description | -| --------- | --------------------------------------------------- | ------------------------------------------ | ------------------- | ---------------------------------------------------------------------------------- | -| single | `number` \｜ (`model`: `NodeModel`) => `number` | 2 | 2, | the center force strength for discrete nodes (with 0 degree) | -| leaf | `number` \｜ (`model`: `NodeModel`) => `number` | 2 | 2 | the center force strength for leaf nodes (with 1 degree) | -| others | `number` \｜ (`model`: `NodeModel`) => `number` | 1 | 1 | the center force strength for other nodes beside leaf and discrete nodes | -| center | (`model`: `NodeModel`) => `{ x: number; y: number}` | (node, nodes, edges) => ({ x: 10, y: 10 }) | center of the graph | the center force's coordinate. You can return different values for different nodes | +Centripetal force configuration, including the centripetal center and the strength of the centripetal force for leaf nodes, discrete nodes, and other nodes ## leafCluster @@ -242,9 +217,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `false` -**Required**: false - -**Description**: Whether to enable leaf clustering. If true, `centripetalOptions.single` will be set to 100, `centripetalOptions.leaf` will use the return value of `getClusterNodeStrength`, and `getClusterNodeStrength.center` will return the average center of all leaf nodes +Whether to enable leaf clustering. If true, `centripetalOptions.single` will be set to 100, `centripetalOptions.leaf` will use the return value of `getClusterNodeStrength`, and `getClusterNodeStrength.center` will return the average center of all leaf nodes ## clustering @@ -252,9 +225,7 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `false` -**Required**: false - -**Description**: Whether to enable clustering for all nodes. If `true`, the field specified in the `nodeClusterBy` configuration will be used as the basis for clustering. `centripetalOptions.single`, `centripetalOptions.leaf`, `centripetalOptions.others` will use the return value of `getClusterNodeStrength`, and `centripetalOptions.center` will use the average center of all nodes in the cluster to which the current node belongs. +Whether to enable clustering for all nodes. If `true`, the field specified in the `nodeClusterBy` configuration will be used as the basis for clustering. `centripetalOptions.single`, `centripetalOptions.leaf`, `centripetalOptions.others` will use the return value of `getClusterNodeStrength`, and `centripetalOptions.center` will use the average center of all nodes in the cluster to which the current node belongs. ## nodeClusterBy @@ -262,39 +233,31 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `undefined` -**Required**: false - -**Description**: Specify the field name in the node data to be used as the basis for node clustering. It takes effect when `clustering` is set to `true` and automatically generates `centripetalOptions`. Can be used in conjunction with `clusterNodeStrength`. +Specify the field name in the node data to be used as the basis for node clustering. It takes effect when `clustering` is set to `true` and automatically generates `centripetalOptions`. Can be used in conjunction with `clusterNodeStrength`. ## clusterNodeStrength -**Type**: `number` \| (`model`: `NodeModel`) => `number` +**Type**: `number | (model: NodeModel) => number` **Default**: `20` -**Required**: false - -**Description**: Used in conjunction with `clustering` and `nodeClusterBy` to specify the strength of clustering centripetal force. +Used in conjunction with `clustering` and `nodeClusterBy` to specify the strength of clustering centripetal force. ## onTick -**Type**: `Function` +**Type**: `function` **Default**: In G6, if `animated: true`, the callback function is called to update the rendering position of nodes on the canvas after each iteration. -**Required**: false - -**Description**: Callback function for each iteration, returns the layout result for this iteration. +Callback function for each iteration, returns the layout result for this iteration. ## onLayoutEnd -**Type**: `Function` +**Type**: `function` **Default**: In G6, the callback function is called to update the rendering position of nodes on the canvas after completion, and trigger the layout completion event `afterlayout`. -**Required**: false - -**Description**: Callback function after layout completion. +Callback function after layout completion. ## monitor @@ -302,18 +265,6 @@ This document shows all the options for force-directed layout. [Force-Directed L **Default**: `undefined` -**Required**: false - -**Description**: Callback for monitoring information for each iteration. `energy` represents the convergence energy of the layout. If configured, it may cause additional computational energy consumption. If not configured, it will not be calculated. - -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. +Callback for monitoring information for each iteration. `energy` represents the convergence energy of the layout. If configured, it may cause additional computational energy consumption. If not configured, it will not be calculated. -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md b/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md index 52a6b1a70a3..5b4279131c5 100644 --- a/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/ForceLayoutOptions.zh.md @@ -14,9 +14,7 @@ order: 1 **默认值**：`{ type: 'grid' }` -**是否必须**：false - -**说明**：力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 +力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 ## animated @@ -24,9 +22,7 @@ order: 1 **默认值**：`false` -**是否必须**：false - -**说明**：是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配 +是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配 ## gravity @@ -34,29 +30,23 @@ order: 1 **默认值**：`10` -**是否必须**：false - -**说明**：中心力大小，指所有节点被吸引到 `center` 的力。数字越大，布局越紧凑 +中心力大小，指所有节点被吸引到 `center` 的力。数字越大，布局越紧凑 ## center -**类型**：`[number, number]` +**类型**：[number, number]` **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## getCenter -**类型**：(`model`: `NodeModel`) => `number` +**类型**：`(model: NodeModel) => number` **默认值**：`undefined` -**是否必须**：false - -**说明**：每个节点中心力的 x、y、强度的回调函数，若不指定，则没有额外中心力 +每个节点中心力的 x、y、强度的回调函数，若不指定，则没有额外中心力 **示例**： @@ -69,65 +59,41 @@ order: 1 }; ``` -## preventOverlap - -**类型**：`boolean` - -**默认值**：`true` - -**是否必须**：false - -**说明**：是否防止重叠，必须配合下面属性 `nodeSize` 或节点数据中的 `data.size` 属性，只有在数据中设置了 `data.size` 或在该布局中配置了与当前图节点大小相同的 `nodeSize` 值，才能够进行有效的节点重叠的碰撞检 - -## nodeSize - -**类型**：`number` \| `number`[] \| (`model`: `NodeModel`) => `number` + -**默认值**：读取节点数据中的 `data.size`，若无则默认值为 `10` - -**是否必须**：false - -**说明**：节点大小（直径）。用于碰撞检测 + ## nodeSpacing -**类型**：`number` \| `number`[] \| (`model`: `NodeModel`) => `number` +**类型**：`number | number[] | (model: NodeModel) => number` **默认值**：`10` -**是否必须**：false - -**说明**：`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距 +`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距 ## linkDistance -**类型**：`number` \| (`model`: `EdgeModel`) => `number` +**类型**：`number | (model: NodeModel) => number` **默认值**：`200` -**是否必须**：false - -**说明**：边的理想长度，可以理解为边作为弹簧在不受力下的长度 +边的理想长度，可以理解为边作为弹簧在不受力下的长度 ## nodeStrength -**类型**：`number` \| (`model`: `NodeModel`) => `number` +**类型**：`number | (model: NodeModel) => number` **默认值**：`1000` -**是否必须**：false - -**说明**：节点之间的作用力，正数代表节点之间的斥力作用，负数代表节点之间的引力作用 +节点之间的作用力，正数代表节点之间的斥力作用，负数代表节点之间的引力作用 ## edgeStrength -**类型**：`number` \| (`model`: `EdgeModel`) => `number` +**类型**：`number | (model: NodeModel) => number` **默认值**：`200` -**是否必须**：false - -**说明**：边的作用力（引力）大小 +边的作用力（引力）大小 ## maxSpeed @@ -135,9 +101,7 @@ order: 1 **默认值**：`1000` -**是否必须**：false - -**说明**：一次迭代的最大移动长度 +一次迭代的最大移动长度 ## factor @@ -145,9 +109,7 @@ order: 1 **默认值**：`1` -**是否必须**：false - -**说明**：斥力系数，数值越大，斥力越大 +斥力系数，数值越大，斥力越大 ## coulombDisScale @@ -155,19 +117,15 @@ order: 1 **默认值**：`0.05` -**是否必须**：false - -**说明**：库伦系数，斥力的一个系数，数字越大，节点之间的斥力越大 +库伦系数，斥力的一个系数，数字越大，节点之间的斥力越大 ## getMass -**类型**：(`model`: `NodeModel`) => `number` +**类型**：`(model: NodeModel) => number` **默认值**：在 G6 中使用，增量布局时已存在的节点质量将被加大，以保持已有内容的稳定。其他情况下节点质量为 `1` -**是否必须**：false - -**说明**：每个节点质量的回调函数，如参为节点内部流转数据，返回值为质量大小 +每个节点质量的回调函数，如参为节点内部流转数据，返回值为质量大小 ## minMovement @@ -175,19 +133,15 @@ order: 1 **默认值**：`0.4` -**是否必须**：false - -**说明**：当一次迭代的平均/最大/最小（根据`distanceThresholdMode`决定）移动长度小于该值时停止迭代。数字越小，布局越收敛，所用时间将越长 +当一次迭代的平均/最大/最小（根据`distanceThresholdMode`决定）移动长度小于该值时停止迭代。数字越小，布局越收敛，所用时间将越长 ## distanceThresholdMode -**类型**：`'mean'`\|`'max'`\｜`'min'` +**类型**：`'mean' | 'max' | 'min'` **默认值**：`'mean'` -**是否必须**：false - -**说明**：`minMovement` 的使用条件，`'mean'` 代表平均移动距离小于 `minMovement` 时停止迭代，`'max'`/`'min'` 代表最大/最小移动距离小于时 `minMovement` 时停时迭于该值时停止迭代。数字越小，布局越收敛，所用时间将越长 +`minMovement` 的使用条件，`'mean'` 代表平均移动距离小于 `minMovement` 时停止迭代，`'max'`/`'min'` 代表最大/最小移动距离小于时 `minMovement` 时停时迭于该值时停止迭代。数字越小，布局越收敛，所用时间将越长 ## maxIteration @@ -195,9 +149,7 @@ order: 1 **默认值**：`1000` -**是否必须**：false - -**说明**：最大迭代次数。当迭代次数超过该值，但平均移动长度仍然没有达到 minMovement，也将强制停止迭 +最大迭代次数。当迭代次数超过该值，但平均移动长度仍然没有达到 minMovement，也将强制停止迭 ## damping @@ -205,9 +157,7 @@ order: 1 **默认值**：`0.9` -**是否必须**：false - -**说明**：阻尼系数，取值范围 [0, 1]。数字越大，速度降低得越慢 +阻尼系数，取值范围 [0, 1]。数字越大，速度降低得越慢 ## interval @@ -215,26 +165,49 @@ order: 1 **默认值**：`0.02` -**是否必须**：false - -**说明**：控制每个迭代节点的移动速度 +控制每个迭代节点的移动速度 ## centripetalOptions -**类型**：`CentripetalOptions` 见下表 +**类型**：`CentripetalOptions` + +
+ + CentripetalOptions + + +```ts +type CentripetalOptions = { + /** 离散节点的中心力强度（度为 0 的节点） */ + single?: number | ((model: NodeModel) => number); + /** 叶子节点的中心力强度（度为 1 的节点） */ + leaf?: number | ((model: NodeModel) => number); + /** 其他节点的中心力强度（除了叶子节点和离散节点） */ + others?: number | ((model: NodeModel) => number); + /** 中心力的坐标，可以为不同的节点返回不同的值 */ + center?: (model: NodeModel) => { x: number; y: number }; +}; +``` -**默认值**：见下表 +
-**是否必须**：false +**默认值**：`object` -**说明**：向心力配置，包括叶子节点、离散点、其他节点的向心中心及向心力大小 +
+ + object + -| Parameter | Type | Example | Default | Description | -| --------- | --------------------------------------------------- | ------------------------------------------ | ------------------- | ---------------------------------------------------------------------------------- | -| single | `number` \｜ (`model`: `NodeModel`) => `number` | 2 | 2, | the center force strength for discrete nodes (with 0 degree) | -| leaf | `number` \｜ (`model`: `NodeModel`) => `number` | 2 | 2 | the center force strength for leaf nodes (with 1 degree) | -| others | `number` \｜ (`model`: `NodeModel`) => `number` | 1 | 1 | the center force strength for other nodes beside leaf and discrete nodes | -| center | (`model`: `NodeModel`) => `{ x: number; y: number}` | (node, nodes, edges) => ({ x: 10, y: 10 }) | center of the graph | the center force's coordinate. You can return different values for different nodes | +```json +{ + "single": 2, + "leaf": 2, + "others": 1, + "center": // center of the graph +} +``` + +
## leafCluster @@ -242,9 +215,7 @@ order: 1 **默认值**：`false` -**是否必须**：false - -**说明**：是否需要叶子结点聚类，若为 `true`，则 `centripetalOptions.single` 将为 `100`；`centripetalOptions.leaf` 将使用 `getClusterNodeStrength` 返回值；`getClusterNodeStrength.center` 将为叶子节点返回当前所有叶子节点的平均中心 +是否需要叶子结点聚类，若为 `true`，则 `centripetalOptions.single` 将为 `100`；`centripetalOptions.leaf` 将使用 `getClusterNodeStrength` 返回值；`getClusterNodeStrength.center` 将为叶子节点返回当前所有叶子节点的平均中心 ## clustering @@ -252,9 +223,7 @@ order: 1 **默认值**：`false` -**是否必须**：false - -**说明**：是否需要全部节点聚类，若为 `true`，将使用 `nodeClusterBy` 配置的节点数据中的字段作为聚类依据。 `centripetalOptions.single`、`centripetalOptions.leaf`、`centripetalOptions.others` 将使用 `getClusterNodeStrength` 返回值；`leaf`、`centripetalOptions.center` 将使用当前节点所属聚类中所有节点的平均中心 +是否需要全部节点聚类，若为 `true`，将使用 `nodeClusterBy` 配置的节点数据中的字段作为聚类依据。 `centripetalOptions.single`、`centripetalOptions.leaf`、`centripetalOptions.others` 将使用 `getClusterNodeStrength` 返回值；`leaf`、`centripetalOptions.center` 将使用当前节点所属聚类中所有节点的平均中心 ## nodeClusterBy @@ -262,39 +231,31 @@ order: 1 **默认值**：`undefined` -**是否必须**：false - -**说明**：指定节点数据中的字段名称作为节点聚类的依据，`clustering` 为 `true` 时生效，自动生成 `centripetalOptions`，可配合 `clusterNodeStrength` 使用 +指定节点数据中的字段名称作为节点聚类的依据，`clustering` 为 `true` 时生效，自动生成 `centripetalOptions`，可配合 `clusterNodeStrength` 使用 ## clusterNodeStrength -**类型**：`number` \| (`model`: `NodeModel`) => `number` +**类型**：`number | (model: NodeModel) => number` **默认值**：`20` -**是否必须**：false - -**说明**：配合 `clustering` 和 `nodeClusterBy` 使用，指定聚类向心力的大小 +配合 `clustering` 和 `nodeClusterBy` 使用，指定聚类向心力的大小 ## onTick -**类型**：`Function` +**类型**：`function` **默认值**：在 G6 中使用，若 `animated: true` 则在每次迭代的回调中调用更新画布上节点渲染位置的逻辑 -**是否必须**：false - -**说明**：每一次迭代的回调函数，返回值为这一次迭代的布局结果 +每一次迭代的回调函数，返回值为这一次迭代的布局结果 ## onLayoutEnd -**类型**：`Function` +**类型**：`function` **默认值**：在 G6 中使用，完成后更新画布上节点渲染位置，并触发图的布局完成时机事件 `afterlayout` -**是否必须**：false - -**说明**：布局完成后的回调函数 +布局完成后的回调函数 ## monitor @@ -302,18 +263,6 @@ order: 1 **默认值**：`undefined` -**是否必须**：false - -**说明**：每个迭代的监控信息回调，`energy` 表示布局的收敛能量。若配置可能带来额外的计算能量性能消耗，不配置则不计算 - -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +每个迭代的监控信息回调，`energy` 表示布局的收敛能量。若配置可能带来额外的计算能量性能消耗，不配置则不计算 -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 + diff --git a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md b/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md index b610da254fc..375d12358aa 100644 --- a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/FruchtermanLayoutOptions.en.md @@ -13,9 +13,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `{ type: 'grid' }` -**Required**: false - -**Description**: The initial layout for the force-directed layout. It will execute the layout specified by `presetLayout` first and then perform the force-directed calculation. Since the result of the force-directed layout depends heavily on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force-directed algorithm to converge faster and produce better results. By default, the initialization of the force-directed layout is the result of the grid layout. +The initial layout for the force-directed layout. It will execute the layout specified by `presetLayout` first and then perform the force-directed calculation. Since the result of the force-directed layout depends heavily on the initial positions of the nodes, configuring `presetLayout` can provide a good initialization for the force-directed layout, allowing the force-directed algorithm to converge faster and produce better results. By default, the initialization of the force-directed layout is the result of the grid layout. ## center @@ -23,9 +21,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: The center position of the current container -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## animated @@ -33,9 +29,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `false` -**Required**: false - -**Description**: Whether to enable animation for each iteration. Note that the force-directed layout simulates the process of force interaction. When this parameter is enabled, the process of force interaction and collision can be observed. The `animated` parameter in the node configuration, on the other hand, is for interpolation animation, which uniformly interpolates from the initial position to the position after the layout. These two layouts should not be used together. +Whether to enable animation for each iteration. Note that the force-directed layout simulates the process of force interaction. When this parameter is enabled, the process of force interaction and collision can be observed. The `animated` parameter in the node configuration, on the other hand, is for interpolation animation, which uniformly interpolates from the initial position to the position after the layout. These two layouts should not be used together. ## dimensions @@ -43,9 +37,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `2` -**Required**: false - -**Description**: The dimension of the layout. Set it to `2` for 2D rendering. If it is set to `3` for 3D rendering, the layout calculation for the z-axis will be performed. +The dimension of the layout. Set it to `2` for 2D rendering. If it is set to `3` for 3D rendering, the layout calculation for the z-axis will be performed. ## width @@ -53,9 +45,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `undefined` -**Required**: false - -**Description**: The width of the layout. By default, it uses the width of the container. +The width of the layout. By default, it uses the width of the container. ## height @@ -63,9 +53,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `undefined` -**Required**: false - -**Description**: The height of the layout. By default, it uses the height of the container. +The height of the layout. By default, it uses the height of the container. ## clustering @@ -73,9 +61,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `false` -**Required**: false - -**Description**: Whether to perform clustering layout. +Whether to perform clustering layout. ## nodeClusterBy @@ -83,9 +69,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `undefined` -**Required**: false - -**Description**: The field name in the node model to be used as the basis for clustering layout. It takes effect when `clustering` is set to `true`. +The field name in the node model to be used as the basis for clustering layout. It takes effect when `clustering` is set to `true`. ## clusterGravity @@ -93,9 +77,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `10` -**Required**: false - -**Description**: The strength of gravity within a cluster, which affects the compactness of the clustering. It takes effect when `clustering` is set to `true`. +The strength of gravity within a cluster, which affects the compactness of the clustering. It takes effect when `clustering` is set to `true`. ## gravity @@ -103,9 +85,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `10` -**Required**: false - -**Description**: The strength of the central force, which attracts all nodes to the `center`. The larger the number, the more compact the layout. +The strength of the central force, which attracts all nodes to the `center`. The larger the number, the more compact the layout. ## maxIteration @@ -113,9 +93,7 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `1000` -**Required**: false - -**Description**: The maximum number of iterations. +The maximum number of iterations. ## speed @@ -123,28 +101,14 @@ This article shows all the configuration options for the Fruchterman force-direc **Default**: `1` -**Required**: false - -**Description**: The speed at which nodes move in each iteration. A high speed may cause strong oscillations. +The speed at which nodes move in each iteration. A high speed may cause strong oscillations. ## onTick -**Type**: `Function` +**Type**: `function` **Default**: In G6, if `animated: true`, the callback function is called to update the rendering position of nodes on the canvas after each iteration. -**Required**: false - -**Description**: Callback function for each iteration, returns the layout result for this iteration. - -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. +Callback function for each iteration, returns the layout result for this iteration. -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md b/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md index 1afff169ae1..5303dffe0f3 100644 --- a/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/FruchtermanLayoutOptions.zh.md @@ -13,9 +13,7 @@ order: 10 **默认值**：`{ type: 'grid' }` -**是否必须**：false - -**说明**：力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 +力导向布局的初始化布局，将先执行 `presetLayout` 指定的布局，再进行力导向计算。由于力导向布局的结果非常依赖节点的初始位置，配置 `presetLayout` 的可以给力导向布局一个好的初始化，让力导向算法更快收敛、效果更好。默认情况下，力导向的初始化为格子布局（grid）的结果 ## center @@ -23,9 +21,7 @@ order: 10 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## animated @@ -33,9 +29,7 @@ order: 10 **默认值**：`false` -**是否必须**：false - -**说明**：是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配 +是否启用迭代的动画，清注意力导布局的迭代模拟的是力相互作用的过程，此参数开启后可以看到力作用碰撞过程。而节点配置中的 animates 是插值动画，即从初始位置均匀插值到布局后的位置。这两种布局不应同时配 ## dimensions @@ -43,9 +37,7 @@ order: 10 **默认值**：`2` -**是否必须**：false - -**说明**：布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局 +布局的维度，2D 渲染时指定为 2；若为 3D 渲染可指定为 3，则将多计算 z 轴的布局 ## width @@ -53,9 +45,7 @@ order: 10 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的宽度，默认使用容器宽度 +布局的宽度，默认使用容器宽度 ## height @@ -63,9 +53,7 @@ order: 10 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的高度，默认使用容器高度 +布局的高度，默认使用容器高度 ## clustering @@ -73,9 +61,7 @@ order: 10 **默认值**：`false` -**是否必须**：false - -**说明**：是否按照聚类布局 +是否按照聚类布局 ## nodeClusterBy @@ -83,9 +69,7 @@ order: 10 **默认值**：`undefined` -**是否必须**：false - -**说明**：聚类布局依据的节点数据 data 中的字段名，`cluster: true` 时使用 +聚类布局依据的节点数据 data 中的字段名，`cluster: true` 时使用 ## clusterGravity @@ -93,9 +77,7 @@ order: 10 **默认值**：`10` -**是否必须**：false - -**说明**：聚类内部的重力大小，影响聚类的紧凑程度，在 `clustering` 为 `true` 时生效 +聚类内部的重力大小，影响聚类的紧凑程度，在 `clustering` 为 `true` 时生效 ## gravity @@ -103,9 +85,7 @@ order: 10 **默认值**：`10` -**是否必须**：false - -**说明**：中心力大小，指所有节点被吸引到 `center` 的力。数字越大，布局越紧凑 +中心力大小，指所有节点被吸引到 `center` 的力。数字越大，布局越紧凑 ## maxIteration @@ -113,9 +93,7 @@ order: 10 **默认值**：`1000` -**是否必须**：false - -**说明**：最大迭代次数 +最大迭代次数 ## speed @@ -123,28 +101,14 @@ order: 10 **默认值**：`1` -**是否必须**：false - -**说明**：每次迭代节点移动的速度。速度太快可能会导致强烈震荡 +每次迭代节点移动的速度。速度太快可能会导致强烈震荡 ## onTick -**类型**：`Function` +**类型**：`function` **默认值**：在 G6 中使用，若 `animated: true` 则在每次迭代的回调中调用更新画布上节点渲染位置的逻辑 -**是否必须**：false - -**说明**：每一次迭代的回调函数，返回值为这一次迭代的布局结果 - -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +每一次迭代的回调函数，返回值为这一次迭代的布局结果 -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 + diff --git a/packages/site/docs/apis/layout/GridLayoutOptions.en.md b/packages/site/docs/apis/layout/GridLayoutOptions.en.md index 1fb6c2d2512..8658dd8ac46 100644 --- a/packages/site/docs/apis/layout/GridLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/GridLayoutOptions.en.md @@ -13,9 +13,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `[0, 0]` -**Required**: false - -**Description**: The starting position of the grid (top-left corner). +The starting position of the grid (top-left corner). ## width @@ -23,9 +21,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: In G6, the default value of `grid` layout `width` is the width of the current container. When used separately, the default value is `300`. -**Required**: false - -**Description**: The total width of the grid layout. +The total width of the grid layout. ## height @@ -33,9 +29,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: In G6, the default value of `grid` layout `height` is the height of the current container. When used separately, the default value is `300`. -**Required**: false - -**Description**: The total height of the grid layout. +The total height of the grid layout. ## rows @@ -43,9 +37,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `10` -**Required**: false - -**Description**: The number of rows in the grid. When set to `undefined`, the algorithm will automatically calculate based on the number of nodes, layout space, and `cols` (if specified). +The number of rows in the grid. When set to `undefined`, the algorithm will automatically calculate based on the number of nodes, layout space, and `cols` (if specified). ## cols @@ -53,29 +45,11 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `undefined` -**Required**: false - -**Description**: The number of columns in the grid. When set to `undefined`, the algorithm will automatically calculate based on the number of nodes, layout space, and `rows` (if specified). - -## preventOverlap - -**Type**: `boolean` - -**Default**: `false` +The number of columns in the grid. When set to `undefined`, the algorithm will automatically calculate based on the number of nodes, layout space, and `rows` (if specified). -**Required**: false + -**Description**: Whether to prevent overlap. It must be used in conjunction with the `nodeSize` attribute below. Only when the `nodeSize` value is set to the same size as the current graph node, can the collision detection for node overlap be effectively performed. - -## nodeSize - -**Type**: `number` \| `number`[] \| (`model`: `NodeModel`) => `number` - -**Default**: Reads the `data.size` in the node model. If not specified, the default value is `10`. - -**Required**: false - -**Description**: The size (diameter) of the nodes. Used for collision detection. + ## preventOverlapPadding @@ -83,9 +57,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `10` -**Required**: false - -**Description**:The padding (spacing) between nodes when preventing overlap. It takes effect when `preventOverlap` is set to `true`. +The padding (spacing) between nodes when preventing overlap. It takes effect when `preventOverlap` is set to `true`. ## condense @@ -93,9 +65,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `false` -**Required**: false - -**Description**: When set to `false`, it means using all available canvas space. When set to `true`, it means using the minimum canvas space. +When set to `false`, it means using all available canvas space. When set to `true`, it means using the minimum canvas space. ## position @@ -103,9 +73,7 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `undefined` -**Required**: false - -**Description**: Specifies the row and column in which each node is located. +Specifies the row and column in which each node is located. ## sortBy @@ -113,6 +81,4 @@ This article shows all the configuration options for the grid layout. [Grid Layo **Default**: `undefined` -**Required**: false - -**Description**: Specifies the sorting criterion (node property name). The higher the value, the more centrally the node will be placed. If undefined, the node degree will be calculated, with higher degrees resulting in more centrally placed nodes. +Specifies the sorting criterion (node property name). The higher the value, the more centrally the node will be placed. If undefined, the node degree will be calculated, with higher degrees resulting in more centrally placed nodes. diff --git a/packages/site/docs/apis/layout/GridLayoutOptions.zh.md b/packages/site/docs/apis/layout/GridLayoutOptions.zh.md index 84dbfc23522..f542ce35646 100644 --- a/packages/site/docs/apis/layout/GridLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/GridLayoutOptions.zh.md @@ -13,9 +13,7 @@ order: 7 **默认值**：`[0, 0]` -**是否必须**：false - -**说明**：网格开始位置（左上角） +网格开始位置（左上角） ## width @@ -23,9 +21,7 @@ order: 7 **默认值**：在 G6 中使用当前容器的宽度作为 `grid` 布局 `width` 的默认值。单独使用此布局时默认值为 `300` -**是否必须**：false - -**说明**：网格布局的总宽度 +网格布局的总宽度 ## height @@ -33,9 +29,7 @@ order: 7 **默认值**：在 G6 中使用当前容器的高度作为 `grid` 布局 `height` 的默认值。单独使用此布局时默认值为 `300` -**是否必须**：false - -**说明**：网格布局的总高度 +网格布局的总高度 ## rows @@ -43,9 +37,7 @@ order: 7 **默认值**：`10` -**是否必须**：false - -**说明**：网格的行数，为 `undefined` 时算法根据节点数量、布局空间、`cols`（若指定）自动计算 +网格的行数，为 `undefined` 时算法根据节点数量、布局空间、`cols`（若指定）自动计算 ## cols @@ -53,29 +45,13 @@ order: 7 **默认值**：`undefined` -**是否必须**：false - -**说明**：网格的列数，为 `undefined` 时算法根据节点数量、布局空间、`rows`（若指定）自动计算 - -## preventOverlap - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false - -**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够有效进行节点重叠的碰撞检测 - -## nodeSize - -**类型**：`number` \| `number`[] \| (`model`: `NodeModel`) => `number` +网格的列数，为 `undefined` 时算法根据节点数量、布局空间、`rows`（若指定）自动计算 -**默认值**：读取节点数据中的 `data.size`，若无则默认值为 `10` + -**是否必须**：false + -**说明**：节点大小（直径）。用于碰撞检测 +节点大小（直径）。用于碰撞检测 ## preventOverlapPadding @@ -83,9 +59,7 @@ order: 7 **默认值**：`10` -**是否必须**：false - -**说明**：避免重叠时节点的间距 `padding`。`preventOverlap` 为 `true` 时生效 +避免重叠时节点的间距 `padding`。`preventOverlap` 为 `true` 时生效 ## condense @@ -93,9 +67,7 @@ order: 7 **默认值**：`false` -**是否必须**：false - -**说明**：为 `false` 时表示利用所有可用画布空间，为 `true` 时表示利用最小的画布空间 +为 `false` 时表示利用所有可用画布空间，为 `true` 时表示利用最小的画布空间 ## position @@ -103,9 +75,7 @@ order: 7 **默认值**：`undefined` -**是否必须**：false - -**说明**：指定每个节点所在的行和列 +指定每个节点所在的行和列 ## sortBy @@ -113,6 +83,4 @@ order: 7 **默认值**：`undefined` -**是否必须**：false - -**说明**：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 +指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 diff --git a/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md b/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md index 19b248c0cea..6981c8b8bd4 100644 --- a/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/IndentedLayoutOptions.en.md @@ -9,10 +9,16 @@ Indented layout represents the hierarchy by indent between them. Each node will ## direction -**Type**: String
**Options**: 'LR' | 'RL' | 'H'
**Default**: 'LR'
**Required**: false
**Description**: The direction of layout: +**Type**: `'LR' | 'RL' | 'H'` + +**Default**: `'LR'` + +The direction of layout: + +- LR —— Root is on the left, layout from the left to the right(left image below) + +- RL —— Root is on the right, layout from the right to the left(center image below) -- LR —— Root is on the left, layout from the left to the right(left image below)
-- RL —— Root is on the right, layout from the right to the left(center image below)
- H —— Root is on the middle, layout in horizontal symmetry(right image below) img @@ -23,7 +29,11 @@ Indented layout represents the hierarchy by indent between them. Each node will ## indent -**Type**: Number | Function
**Default**: 20
**Example**： +**Type**: `number | function` + +**Default**: `20` + +**Example**： ```javascript (d) => { @@ -33,11 +43,13 @@ Indented layout represents the hierarchy by indent between them. Each node will }; ``` -**Required**: false
**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. +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. ## getWidth -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -47,11 +59,13 @@ Indented layout represents the hierarchy by indent between them. Each node will }; ``` -**Required**: false
**Description**: The width of each node. Takes effect only when `direction` is `'H'` +The width of each node. Takes effect only when `direction` is `'H'` ## getHeight -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -61,11 +75,13 @@ Indented layout represents the hierarchy by indent between them. Each node will }; ``` -**Required**: false
**Description**: The height of each node +The height of each node ## getSide -**Type**: Function
**Example**: +**Type**: `function` + +**Example**: ```javascript (d) => { @@ -75,12 +91,10 @@ Indented layout represents the hierarchy by indent between them. Each node will }; ``` -**Required**: false
**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it. +The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it. ## dropCap -**Type**: Boolean - -
**Required**: false +**Type**: `boolean` -
**Explanation**: Whether place the first child node at the next line. `true` by default +Whether place the first child node at the next line. `true` by default diff --git a/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md b/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md index 6b5d8a55b9b..8ab672d5b73 100644 --- a/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md @@ -9,10 +9,16 @@ order: 15 ## direction -**类型**：String
**可选值**：'LR' | 'RL' | 'H'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，默认为 `'LR'`，其他选项说明： +**类型**：`'LR' | 'RL' | 'H'` + +**默认值**：`'LR'` + +树布局的方向，默认为 `'LR'`，其他选项说明： + +- LR —— 根节点在左，往右布局（下图左） + +- RL —— 根节点在右，往左布局（下图中） -- LR —— 根节点在左，往右布局（下图左）
-- RL —— 根节点在右，往左布局（下图中）
- H —— 根节点在中间，水平对称布局（下图右） img @@ -23,7 +29,11 @@ order: 15 ## indent -**类型**：Number | Function
**默认值**：20
**示例**： +**类型**：`number | function` + +**默认值**：20 + +**示例**： ```javascript (d) => { @@ -33,11 +43,13 @@ order: 15 }; ``` -**是否必须**：false
**说明**：类型为 Number 时，列间间距是固定值；类型为 Function 时，节点与根结点的间距是函数返回值。 +类型为 Number 时，列间间距是固定值；类型为 Function 时，节点与根结点的间距是函数返回值。 ## getWidth -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -47,11 +59,13 @@ order: 15 }; ``` -**是否必须**：false
**说明**：每个节点的宽度，`direction` 为 `'H'` 时有效 +每个节点的宽度，`direction` 为 `'H'` 时有效 ## getHeight -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -61,11 +75,13 @@ order: 15 }; ``` -**是否必须**：false
**说明**：每个节点的高度 +每个节点的高度 ## getSide -**类型**：Function
**示例**： +**类型**：`function` + +**示例**： ```javascript (d) => { @@ -77,12 +93,8 @@ order: 15 ## dropCap -**类型**：Boolean - -
- -**是否必须**：false +**类型**：`boolean` -
**说明**：每个节点的第一个自节点是否位于下一行。默认为 `true` +每个节点的第一个自节点是否位于下一行。默认为 `true` -**是否必须**：false
**说明**：节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点。 +节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点。 diff --git a/packages/site/docs/apis/layout/MDSLayoutOptions.en.md b/packages/site/docs/apis/layout/MDSLayoutOptions.en.md index a7d4c999863..c46768022d9 100644 --- a/packages/site/docs/apis/layout/MDSLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/MDSLayoutOptions.en.md @@ -13,28 +13,14 @@ This article shows all the configuration options for the MDS layout, which is us **Default**: The center position of the current container. -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## linkDistance -**Type**: `number` \| (`model`: `EdgeModel`) => `number` +**Type**: `number | (model: EdgeModel) => number` **Default**: `200` -**Required**: false - -**Description**: The ideal length of the edges, which can be understood as the length of the edge as a spring under no force. - -## workerEnabled - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false - -**Description**: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. +The ideal length of the edges, which can be understood as the length of the edge as a spring under no force. -⚠️ Note: When `workerEnabled: true`, all parameter types of functions are not supported. + diff --git a/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md b/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md index c7f9811ee3e..216336f0780 100644 --- a/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/MDSLayoutOptions.zh.md @@ -13,28 +13,15 @@ order: 12 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## linkDistance -**类型**：`number` \| (`model`: `EdgeModel`) => `number` +**类型**：`number | (model: EdgeModel) => number` **默认值**：`200` -**是否必须**：false - -**说明**：边的理想长度，可以理解为边作为弹簧在不受力下的长度 - -## workerEnabled - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false +边的理想长度，可以理解为边作为弹簧在不受力下的长度 -**说明**：是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 + -⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md b/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md index da3c5ca223b..ac09f807c82 100644 --- a/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/MindmapLayoutOptions.en.md @@ -9,7 +9,11 @@ Mindmap arranged the nodes with same depth on the same level. Different from com ## direction -**Type**: String
**Options**: 'H' | 'V'
**Default**: 'H'
**Required**: false
**Description**: The direction of layout. +**Type**: `'H' | 'V'` + +**Default**: `'H'` + +The direction of layout. - H —— Root is on the middle, layout in horizontal symmetry. @@ -21,7 +25,9 @@ Mindmap arranged the nodes with same depth on the same level. Different from com ## getWidth -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -31,11 +37,13 @@ Mindmap arranged the nodes with same depth on the same level. Different from com }; ``` -**Required**: false
**Description**: The width of each node +The width of each node ## getHeight -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -45,11 +53,13 @@ Mindmap arranged the nodes with same depth on the same level. Different from com }; ``` -**Required**: false
**Description**: The height of each node +The height of each node ## getHGap -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -59,11 +69,15 @@ Mindmap arranged the nodes with same depth on the same level. Different from com }; ``` -**Default**: 18
**Required**: false
**Description**: The horizontal separation of nodes +**Default**: `18` + +The horizontal separation of nodes ## getVGap -**Type**: Number | Function
**Example**: +**Type**: `number | function` + +**Example**: ```javascript (d) => { @@ -73,11 +87,15 @@ Mindmap arranged the nodes with same depth on the same level. Different from com }; ``` -**Default**: 18
**Required**: false
**Description**: The vertical separation of nodes +**Default**: `18` + +The vertical separation of nodes ## getSide -**Type**: Function
**Example**: +**Type**: `function` + +**Example**: ```javascript (d) => { @@ -87,4 +105,6 @@ Mindmap arranged the nodes with same depth on the same level. Different from com }; ``` -**Default**: 'right'
**Required**: false
**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it +**Default**: `'right'` + +The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it diff --git a/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md b/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md index 6510cf23b74..4f32fccf616 100644 --- a/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/MindmapLayoutOptions.zh.md @@ -9,7 +9,11 @@ order: 16 ## direction -**类型**：String
**可选值**：'H' | 'V'
**默认值**：'H'
**是否必须**：false
**说明**：树布局的方向，默认为 `'H'`，其他选项说明 +**类型**：`'H' | 'V'` + +**默认值**：`'H'` + +树布局的方向，默认为 `'H'`，其他选项说明 - H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧 @@ -21,7 +25,9 @@ order: 16 ## getWidth -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -31,11 +37,13 @@ order: 16 }; ``` -**是否必须**：false
**说明**：每个节点的宽度 +每个节点的宽度 ## getHeight -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -45,11 +53,13 @@ order: 16 }; ``` -**是否必须**：false
**说明**：每个节点的高度 +每个节点的高度 ## getHGap -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -59,11 +69,15 @@ order: 16 }; ``` -**默认值**：18
**是否必须**：false
**说明**：每个节点的水平间隙 +**默认值**：18 + +每个节点的水平间隙 ## getVGap -**类型**：Number | Function
**示例**： +**类型**：`number | function` + +**示例**： ```javascript (d) => { @@ -73,11 +87,15 @@ order: 16 }; ``` -**默认值**：18
**是否必须**：false
**说明**：每个节点的垂直间隙 +**默认值**：18 + +每个节点的垂直间隙 ## getSide -**类型**：Function
**示例**： +**类型**：`function` + +**示例**： ```javascript (d) => { @@ -87,4 +105,6 @@ order: 16 }; ``` -**默认值**：'right'
**是否必须**：false
**说明**：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 +**默认值**：'right' + +节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 diff --git a/packages/site/docs/apis/layout/RadialLayoutOptions.en.md b/packages/site/docs/apis/layout/RadialLayoutOptions.en.md index 2b20df3de25..3c4bef48dcf 100644 --- a/packages/site/docs/apis/layout/RadialLayoutOptions.en.md +++ b/packages/site/docs/apis/layout/RadialLayoutOptions.en.md @@ -14,19 +14,15 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: The center position of the current container. -**Required**: false - -**Description**: The center position of the circular layout. +The center position of the circular layout. ## focusNode -**Type**: `string` | `number` +**Type**: `string | number` **Default**: `null` -**Required**: false - -**Description**: The center of the radial layout, defaults to the first node in the data. Can be a node ID or the node itself. +The center of the radial layout, defaults to the first node in the data. Can be a node ID or the node itself. ## height @@ -34,9 +30,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `undefined` -**Required**: false - -**Description**: The height of the layout, defaults to the container's height. +The height of the layout, defaults to the container's height. ## width @@ -44,9 +38,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `undefined` -**Required**: false - -**Description**: The width of the layout, defaults to the container's width. +The width of the layout, defaults to the container's width. ## unitRadius @@ -54,9 +46,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `100` -**Required**: false - -**Description**: The distance between each circle and the previous circle. By default, it fills the entire canvas, which means it is determined by the size of the graph. +The distance between each circle and the previous circle. By default, it fills the entire canvas, which means it is determined by the size of the graph. ## linkDistance @@ -64,39 +54,19 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `50` -**Required**: false - -**Description**: The length of the edges. - -## preventOverlap - -**Type**: `boolean` - -**Default**: `false` - -**Required**: false +The length of the edges. -**Description**: Whether to prevent node overlap. It must be used with the `nodeSize` property below. To effectively detect collisions between nodes, you must set the `nodeSize` value to be the same as the size of the current graph node. + -## nodeSize - -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**Default**: `10` - -**Required**: false - -**Description**: The size (diameter) of the nodes. Used for collision detection when preventing node overlap. + ## nodeSpacing -**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` + **Default**: `10` -**Required**: false - -**Description**: Effective when `preventOverlap` is `true`. It specifies the minimum spacing between the edges of nodes when preventing overlap. It can be a callback function to set different minimum distances for different nodes, as shown in the example. +Effective when `preventOverlap` is `true`. It specifies the minimum spacing between the edges of nodes when preventing overlap. It can be a callback function to set different minimum distances for different nodes, as shown in the example. **Example**: @@ -116,9 +86,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `1000` -**Required**: false - -**Description**: The maximum number of iterations to stop. +The maximum number of iterations to stop. ## maxPreventOverlapIteration @@ -126,9 +94,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `200` -**Required**: false - -**Description**: The maximum number of iterations for preventing overlap. +The maximum number of iterations for preventing overlap. ## sortBy @@ -136,9 +102,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `undefined` -**Required**: false - -**Description**: The basis for arranging nodes that are close together after the layout of nodes on the same level. The default is `undefined`, which means arranging based on the topological structure of the data (the shortest path between nodes). Nodes that are closer in proximity or have a smaller shortest path between them will be arranged as close together as possible. `'data'` indicates arranging based on the order of nodes in the data, so nodes that are closer in the data order will be arranged as close together as possible. You can also specify a field name in the node data, such as `'cluster'` or `'name'` (it must exist in the data of the graph). +The basis for arranging nodes that are close together after the layout of nodes on the same level. The default is `undefined`, which means arranging based on the topological structure of the data (the shortest path between nodes). Nodes that are closer in proximity or have a smaller shortest path between them will be arranged as close together as possible. `'data'` indicates arranging based on the order of nodes in the data, so nodes that are closer in the data order will be arranged as close together as possible. You can also specify a field name in the node data, such as `'cluster'` or `'name'` (it must exist in the data of the graph). ## sortStrength @@ -146,9 +110,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `10` -**Required**: false - -**Description**: The strength of arranging nodes on the same level based on `sortBy`. The larger the value, the smaller the distance calculated by `sortBy`. It takes effect when `sortBy` is not `undefined`. +The strength of arranging nodes on the same level based on `sortBy`. The larger the value, the smaller the distance calculated by `sortBy`. It takes effect when `sortBy` is not `undefined`. ## strictRadial @@ -156,9 +118,7 @@ This article shows all the configuration options for the radial layout. [Radial **Default**: `true` -**Required**: false - -**Description**: Whether the radial layout must be strict, i.e., each level of nodes is strictly arranged on a circle. It takes effect when `preventOverlap` is `true`. +Whether the radial layout must be strict, i.e., each level of nodes is strictly arranged on a circle. It takes effect when `preventOverlap` is `true`. - When `preventOverlap` is `true` and `strictRadial` is `false`, the nodes that overlap are strictly diff --git a/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md b/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md index d6fe1d04c40..28b908f4c5c 100644 --- a/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md +++ b/packages/site/docs/apis/layout/RadialLayoutOptions.zh.md @@ -14,19 +14,15 @@ order: 6 **默认值**：当前容器的中心位置 -**是否必须**：false - -**说明**：圆形布局的中心位置 +圆形布局的中心位置 ## focusNode -**类型**：`string` | `number` +**类型**：`string | number` **默认值**：`null` -**是否必须**：false - -**说明**：辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身 +辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身 ## height @@ -34,9 +30,7 @@ order: 6 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的高度，默认使用容器高度 +布局的高度，默认使用容器高度 ## width @@ -44,9 +38,7 @@ order: 6 **默认值**：`undefined` -**是否必须**：false - -**说明**：布局的宽度，默认使用容器宽度 +布局的宽度，默认使用容器宽度 ## unitRadius @@ -54,9 +46,7 @@ order: 6 **默认值**：`100` -**是否必须**：false - -**说明**：每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定 +每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定 ## linkDistance @@ -64,39 +54,19 @@ order: 6 **默认值**：`50` -**是否必须**：false - -**说明**：边长度 - -## preventOverlap - -**类型**：`boolean` - -**默认值**：`false` - -**是否必须**：false +边长度 -**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够有效地进行节点重叠的碰撞检测 + -## nodeSize - -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` - -**默认值**：`10` - -**是否必须**：false - -**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测 + ## nodeSpacing -**类型**：`number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number` + **默认值**：`10` -**是否必须**：false - -**说明**：`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 +`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 **示例**： @@ -116,9 +86,7 @@ order: 6 **默认值**：`1000` -**是否必须**：false - -**说明**：停止迭代到最大迭代数 +停止迭代到最大迭代数 ## maxPreventOverlapIteration @@ -126,9 +94,7 @@ order: 6 **默认值**：`200` -**是否必须**：false - -**说明**：防止重叠步骤的最大迭代次数 +防止重叠步骤的最大迭代次数 ## sortBy @@ -136,9 +102,7 @@ order: 6 **默认值**：`undefined` -**是否必须**：false - -**说明**：同层节点布局后相距远近的依据。默认 `undefined` ，表示根据数据的拓扑结构（节点间最短路径）排布，即关系越近/点对间最短路径越小的节点将会被尽可能排列在一起；`'data'` 表示按照节点在数据中的顺序排列，即在数据顺序上靠近的节点将会尽可能排列在一起；也可以指定为节点数据中的某个字段名，例如 `'cluster'`、`'name'` 等（必须在数据的 `data` 中存在） +同层节点布局后相距远近的依据。默认 `undefined` ，表示根据数据的拓扑结构（节点间最短路径）排布，即关系越近/点对间最短路径越小的节点将会被尽可能排列在一起；`'data'` 表示按照节点在数据中的顺序排列，即在数据顺序上靠近的节点将会尽可能排列在一起；也可以指定为节点数据中的某个字段名，例如 `'cluster'`、`'name'` 等（必须在数据的 `data` 中存在） ## sortStrength @@ -146,9 +110,7 @@ order: 6 **默认值**：`10` -**是否必须**：false - -**说明**：同层节点根据 `sortBy` 排列的强度，数值越大，`sortBy` 指定的方式计算出距离越小的越靠近。`sortBy` 不为 `undefined` 时生效 +同层节点根据 `sortBy` 排列的强度，数值越大，`sortBy` 指定的方式计算出距离越小的越靠近。`sortBy` 不为 `undefined` 时生效 ## strictRadial @@ -156,9 +118,7 @@ order: 6 **默认值**：`true` -**是否必须**：false - -**说明**：是否必须是严格的 `radial` 布局，及每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。 +是否必须是严格的 `radial` 布局，及每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。 - 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `false` 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。 diff --git a/packages/site/docs/common/LayoutNodeSize.en.md b/packages/site/docs/common/LayoutNodeSize.en.md new file mode 100644 index 00000000000..3884705efc8 --- /dev/null +++ b/packages/site/docs/common/LayoutNodeSize.en.md @@ -0,0 +1,7 @@ +## nodeSize + + + +**Default**: `undefined` + +The size (diameter) of the nodes. It is used to prevent node overlap collision. \ No newline at end of file diff --git a/packages/site/docs/common/LayoutNodeSize.zh.md b/packages/site/docs/common/LayoutNodeSize.zh.md new file mode 100644 index 00000000000..9d21ea99bab --- /dev/null +++ b/packages/site/docs/common/LayoutNodeSize.zh.md @@ -0,0 +1,7 @@ +## nodeSize + + + +**默认值**：`undefined` + +节点大小（直径）。用于防止节点重叠时的碰撞检测 \ No newline at end of file diff --git a/packages/site/docs/common/LayoutPreventOverlap.en.md b/packages/site/docs/common/LayoutPreventOverlap.en.md new file mode 100644 index 00000000000..cfec39fc3d4 --- /dev/null +++ b/packages/site/docs/common/LayoutPreventOverlap.en.md @@ -0,0 +1,7 @@ +## preventOverlap + +**Type**: `boolean` + +**Default**: `false` + +Whether to prevent node overlap. It needs to be used together with the `nodeSize` property or the `data.size `property in node model. Node overlap collision detection can only be effectively performed when the `nodeSize` value is set to the same size as the current node or when the `data.size` property is set in the data. \ No newline at end of file diff --git a/packages/site/docs/common/LayoutPreventOverlap.zh.md b/packages/site/docs/common/LayoutPreventOverlap.zh.md new file mode 100644 index 00000000000..a1e1fc9c318 --- /dev/null +++ b/packages/site/docs/common/LayoutPreventOverlap.zh.md @@ -0,0 +1,7 @@ +## preventOverlap + +**类型**：`boolean` + +**默认值**：`false` + +是否防止重叠，必须配合下面属性 nodeSize 或节点数据中的 `data.size` 属性，只有在数据中设置了 `data.size` 或在该布局中配置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 \ No newline at end of file diff --git a/packages/site/docs/common/LayoutSizeOrSpacing.en.md b/packages/site/docs/common/LayoutSizeOrSpacing.en.md new file mode 100644 index 00000000000..88ddd55da56 --- /dev/null +++ b/packages/site/docs/common/LayoutSizeOrSpacing.en.md @@ -0,0 +1 @@ +**Type**: `number | number[] | (nodeModel: NodeModel) => number` diff --git a/packages/site/docs/common/LayoutSizeOrSpacing.zh.md b/packages/site/docs/common/LayoutSizeOrSpacing.zh.md new file mode 100644 index 00000000000..95edd74c3dd --- /dev/null +++ b/packages/site/docs/common/LayoutSizeOrSpacing.zh.md @@ -0,0 +1 @@ +**类型**：`number | number[] | (nodeModel: NodeModel) => number` diff --git a/packages/site/docs/common/LayoutWorkerEnabled.en.md b/packages/site/docs/common/LayoutWorkerEnabled.en.md new file mode 100644 index 00000000000..3867c81d214 --- /dev/null +++ b/packages/site/docs/common/LayoutWorkerEnabled.en.md @@ -0,0 +1,11 @@ +## workerEnabled + +**Type**: `boolean` + +**Default**: `false` + +Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long. + +:::warning +When `workerEnabled: true`, all parameter types of functions are not supported. +::: diff --git a/packages/site/docs/common/LayoutWorkerEnabled.zh.md b/packages/site/docs/common/LayoutWorkerEnabled.zh.md new file mode 100644 index 00000000000..369aa0e13ae --- /dev/null +++ b/packages/site/docs/common/LayoutWorkerEnabled.zh.md @@ -0,0 +1,11 @@ +## workerEnabled + +**类型**：`boolean` + +**默认值**：`false` + +是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 + +:::warning{title=注意} +`workerEnabled: true` 时，不支持所有函数类型的参数。 +:::