Skip to content

Commit

Permalink
docs: format api/layout docs (#5166)
Browse files Browse the repository at this point in the history 
* docs: format api/layout docs

* docs: translate CentripetalOptions doc
  • Loading branch information
@Aarebecca
Aarebecca authored Nov 22, 2023
1 parent 7d5d068 commit eb7fbb4
Show file tree
Hide file tree
Showing 38 changed files with 755 additions and 1,383 deletions.
60 changes: 13 additions & 47 deletions packages/site/docs/apis/layout/CircularLayoutOptions.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,98 +14,64 @@ 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

**Type**: `[number, number]`

**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

**Type**: `boolean`

**Default**: `true`

**Required**: false

**Description**: Whether the layout is in clockwise direction.
Whether the layout is in clockwise direction.

## divisions

**Type**: `number`

**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

**Type**: `number`

**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.
<embed src="../../common/LayoutNodeSize.en.md"></embed>

<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Note:</strong></span> When `workerEnabled: true`, all parameter types of functions are not supported.
<embed src="../../common/LayoutWorkerEnabled.en.md"></embed>
60 changes: 13 additions & 47 deletions packages/site/docs/apis/layout/CircularLayoutOptions.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,98 +14,64 @@ order: 4

**默认值**： 默认从节点大小与间距形成的周长计算而得

**是否必须**：false

**说明**：环形布局的半径。若设置了 `radius`，则 `startRadius` 与 `endRadius` 不生效
环形布局的半径。若设置了 `radius`，则 `startRadius` 与 `endRadius` 不生效

## center

**类型**：`[number, number]`

**默认值**：当前容器的中心位置

**是否必须**：false

**说明**：环形布局的中心位置
环形布局的中心位置

## clockwise

**类型**：`boolean`

**默认值**：`true`

**是否必须**：false

**说明**：是否为顺时针布局
是否为顺时针布局

## divisions

**类型**：`number`

**默认值**：`1`

**是否必须**：false

**说明**：节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效
节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效

## ordering

**类型**：`'topology'` \| `'degree'` \| `null`
**类型**：`'topology' | 'degree' | null`

**默认值**：`null`

**是否必须**：false

**说明**：节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序
节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序

## angleRatio

**类型**：`number`

**默认值**：`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 以防布局计算时间过长阻塞页面交互
<embed src="../../common/LayoutNodeSize.zh.md"></embed>

<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> `workerEnabled: true` 时，不支持所有函数类型的参数。
<embed src="../../common/LayoutWorkerEnabled.zh.md"></embed>
44 changes: 8 additions & 36 deletions packages/site/docs/apis/layout/ComboCombinedLayoutOptions.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,14 @@ 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

**Type**: `LayoutInstance`

**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
Expand All @@ -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({
Expand All @@ -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) => {
Expand All @@ -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`.
<embed src="../../common/LayoutNodeSize.en.md"></embed>
## spacing
**Type**: `number` \| `number`[] \| (`nodeModel`: `NodeModel`) => `number`
<embed src="../../common/LayoutSizeOrSpacing.en.md"></embed>
**Default**: `0`
**Required**: false
**Description**: `preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例
`preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例
**示例**：
Expand All @@ -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.
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Note:</strong></span> When `workerEnabled: true`, all parameter types of functions are not supported.
<embed src="../../common/LayoutWorkerEnabled.en.md"></embed>
Loading

0 comments on commit eb7fbb4

Please sign in to comment.