From 341066ea761fadba03f0cdab26e9aa55edb3051f Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 29 Nov 2024 14:42:08 +0800 Subject: [PATCH] docs: update element docs --- .../docs/api/elements/combos/BaseCombo.en.md | 100 ++++++++++++++--- .../docs/api/elements/combos/BaseCombo.zh.md | 101 +++++++++++++++--- .../docs/api/elements/edges/BaseEdge.en.md | 54 +++++----- .../docs/api/elements/edges/BaseEdge.zh.md | 54 +++++----- 4 files changed, 222 insertions(+), 87 deletions(-) diff --git a/packages/site/docs/api/elements/combos/BaseCombo.en.md b/packages/site/docs/api/elements/combos/BaseCombo.en.md index fedbbcbeb22..85362d21f63 100644 --- a/packages/site/docs/api/elements/combos/BaseCombo.en.md +++ b/packages/site/docs/api/elements/combos/BaseCombo.en.md @@ -50,7 +50,7 @@ The following style configurations will be explained in terms of atomic graphic | x | x coordinate | number | 0 | | y | y coordinate | number | 0 | | z | z coordinate | number | 0 | -| padding | Padding inside the combo, effective only when expanded. When expanded, the size of the combo is determined by the bounding box of its child elements and the padding. | _number \| number[]_ | 0 | +| padding | Padding inside the combo, effective only when expanded. When expanded, the size of the combo is determined by the bounding box of its child elements and the padding. | number | number[] | 0 | | fill | Fill color | string | `#fff` | | stroke | Border color | string | `#000` | | lineWidth | Border width | number | 1 | @@ -61,7 +61,7 @@ The following style configurations will be explained in terms of atomic graphic | Attribute | Description | Type | Default Value | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------- | | collapsed | Whether the combo is expanded or not | boolean | false | -| collapsedSize | The default size of the combo when collapsed | _number \| [number, number] \| [number, number, number]_ | 32 | +| collapsedSize | The default size of the combo when collapsed | number | [number, number] | [number, number, number] | 32 | | collapseFill | Fill color | string | `#fff` | | collapsedStroke | Border color | string | `#000` | | collapsedLineWidth | Border width | number | 1 | @@ -69,19 +69,19 @@ The following style configurations will be explained in terms of atomic graphic ### Collapsed Marker Style (collapsedMarker) -| Attribute | Description | Type | Default Value | -| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -| collapsedMarker | Whether to display the marker when the combo is collapsed | _boolean_ | false | -| collapsedMarkerType | The type of marker displayed when the combo is collapsed
- `'child-count'`: Number of child elements (including Nodes and Combos)
- `'descendant-count'`: Number of descendant elements (including Nodes and Combos)
- `'node-count'`: Number of descendant elements (only Nodes)
- `(children: NodeLikeData[]) => string`: Custom processing logic | `child-count` \| `descendant-count` \| `node-count` \| ((children: _NodeData \| ComboData_[]) => string) | - | -| collapsedMarkerSrc | Image source. This takes priority over collapsedMarkerText | string | - | -| collapsedMarkerWidth | Image width | number | - | -| collapsedMarkerHeight | Image height | number | - | -| collapsedMarkerRadius | Image border radius | number | 0 | -| collapsedMarkerText | Text to display on the marker | string | - | -| collapsedMarkerFill | Marker text color | string | - | -| collapsedMarkerFontSize | Marker font size | number | 16 | -| collapsedMarkerFontWeight | Marker font weight | number \| string | `normal` | -| `collapsedMarker${StyleProps}` | More marker style configurations, refer to [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/en/api/basic/image). For example, collapsedMarkerFontSize refers to the font size of the text in the marker. | [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) \| [ImageStyleProps](https://g.antv.antgroup.com/en/api/basic/image) | - | +| Attribute | Description | Type | Default Value | +| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| collapsedMarker | Whether to display the marker when the combo is collapsed | boolean | false | +| collapsedMarkerType | The type of marker displayed when the combo is collapsed
- `'child-count'`: Number of child elements (including Nodes and Combos)
- `'descendant-count'`: Number of descendant elements (including Nodes and Combos)
- `'node-count'`: Number of descendant elements (only Nodes)
- `(children: NodeLikeData[]) => string`: Custom processing logic | `child-count` | `descendant-count` | `node-count` | ((children: NodeData | ComboData[]) => string) | - | +| collapsedMarkerSrc | Image source. This takes priority over collapsedMarkerText | string | - | +| collapsedMarkerWidth | Image width | number | - | +| collapsedMarkerHeight | Image height | number | - | +| collapsedMarkerRadius | Image border radius | number | 0 | +| collapsedMarkerText | Text to display on the marker | string | - | +| collapsedMarkerFill | Marker text color | string | - | +| collapsedMarkerFontSize | Marker font size | number | 16 | +| collapsedMarkerFontWeight | Marker font weight | number | string | `normal` | +| `collapsedMarker${StyleProps}` | More marker style configurations, refer to [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/en/api/basic/image). For example, collapsedMarkerFontSize refers to the font size of the text in the marker. | [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/en/api/basic/image) | - | ### Label Style (label) @@ -154,6 +154,74 @@ createGraph( ## Animation Attributes (animation) +Defines the animation effect of the combo, and supports the following two configuration methods: + +1. disable all animation of the combo + +```json +{ + "combo": { + "animation": false + } +} +``` + +2. Configuring stage animation + +Stage animation is the animation effect of a combo when it enters the graph, updates, and leaves the graph. Currently supported stages include: + +- `enter`: animation when a combo enters the graph +- `update`: animation when the combo is updated. +- `exit`: animation when the combo leaves the graph +- `show`: animation when the combo is shown from hidden state +- `hide`: animation when the combo is hidden. +- `collapse`: animation when the combo is collapsed. +- `expand`: animation when the combo is expanded. + +You can refer to [animation paradigm](/en/manual/core-concept/animation#animation-paradigm) to configure the combo using the animation syntax, e.g.: + +```json +{ + "combo": { + "animation": { + "update": [ + { + "fields": ["x", "y"], // update animates only the x and y attributes + "duration": 1000, // duration of the animation + "easing": "linear" // the easing function + } + ] + } + } +} +``` + +Built-in animation effects can also be used: + +```json +{ + "combo": { + "animation": { + "enter": "fade", // use a fade animation + "update": "translate", // Use a panning animation. + "exit": "fade" // Use the fade animation. + } + } +} +``` + +You can pass in false to turn off animation for a particular stage: + +```json +{ + "combo": { + "animation": { + "enter": false // Turn off the combo entry animation. + } + } +} +``` + ## Palette Attributes (palette) Define the palette for combos, i.e., a predefined combo color pool, and allocate colors according to rules, mapping the colors to the `fill` property. @@ -167,7 +235,7 @@ Define the palette for combos, i.e., a predefined combo color pool, and allocate | color | Palette colors. If a palette is registered, you can directly specify its registered name, or accept an array of colors | string | string[] | - | | invert | Whether to reverse the palette | boolean | false | -For example, allocate node colors for a set of data according to the `category` field, so that nodes of the same category have the same color: +For example, allocate combo colors for a set of data according to the `category` field, so that combos of the same category have the same color: ```json { diff --git a/packages/site/docs/api/elements/combos/BaseCombo.zh.md b/packages/site/docs/api/elements/combos/BaseCombo.zh.md index 7d1e748ff6c..bd74668181f 100644 --- a/packages/site/docs/api/elements/combos/BaseCombo.zh.md +++ b/packages/site/docs/api/elements/combos/BaseCombo.zh.md @@ -49,7 +49,7 @@ const graph = new Graph({ | x | x 坐标 | number | 0 | | y | y 坐标 | number | 0 | | z | z 坐标 | number | 0 | -| padding | 组合的内边距，只在展开状态下生效。展开时 Combo 的大小由自子元素集合的的包围盒以及 padding 共同决定 | _number \| number[]_ | 0 | +| padding | 组合的内边距，只在展开状态下生效。展开时组合的大小由自子元素集合的的包围盒以及 padding 共同决定 | number | number[] | 0 | | fill | 填充色 | string | `#fff` | | stroke | 描边色 | string | `#000` | | lineWidth | 描边宽度 | number | 1 | @@ -60,7 +60,7 @@ const graph = new Graph({ | 属性 | 描述 | 类型 | 默认值 | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------ | | collapsed | 当前组合是否展开 | boolean | false | -| collapsedSize | 组合收起后的默认大小 | _number \| [number, number] \| [number, number, number]_ | 32 | +| collapsedSize | 组合收起后的默认大小 | number | [number, number] | [number, number, number] | 32 | | collapseFill | 填充色 | string | `#fff` | | collapsedStroke | 描边色 | string | `#000` | | collapsedLineWidth | 描边宽度 | number | 1 | @@ -68,19 +68,19 @@ const graph = new Graph({ ### 收起时标记样式 collapsedMarker -| 属性 | 描述 | 类型 | 默认值 | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | -| collapsedMarker | 组合收起时是否显示标记 | _boolean_ | false | -| collapsedMarkerType | 组合收起时显示的标记类型
- `'child-count'`: 子元素数量（包括 Node 和 Combo）
- `'descendant-count'`: 后代元素数量（包括 Node 和 Combo）
- `'node-count'`: 后代元素数量（只包括 Node）
- `(children: NodeLikeData[]) => string`: 自定义处理逻辑 | `child-count` \| `descendant-count` \| `node-count` \| ((children: _NodeData \| ComboData_[]) => string) | | -| collapsedMarkerSrc | 图片来源。其优先级高于 collapsedMarkerText | string | - | -| collapsedMarkerWidth | 图片宽度 | number | - | -| collapsedMarkerHeight | 图标高度 | number | - | -| collapsedMarkerRadius | 图标圆角半径 | number | 0 | -| collapsedMarkerText | 图标文字 | string | - | -| collapsedMarkerFill | 图标文字颜色 | string | - | -| collapsedMarkerFontSize | 图标字体大小 | number | 16 | -| collapsedMarkerFontWeight | 图标字体粗细 | number \| string | `normal` | -| `collapsedMarker${StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 collapsedMarkerFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) \| [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | +| collapsedMarker | 组合收起时是否显示标记 | boolean | false | +| collapsedMarkerType | 组合收起时显示的标记类型
- `'child-count'`: 子元素数量（包括 Node 和 Combo）
- `'descendant-count'`: 后代元素数量（包括 Node 和 Combo）
- `'node-count'`: 后代元素数量（只包括 Node）
- `(children: NodeLikeData[]) => string`: 自定义处理逻辑 | `child-count` | `descendant-count` | `node-count` | ((children: NodeData | ComboData[]) => string) | | +| collapsedMarkerSrc | 图片来源。其优先级高于 collapsedMarkerText | string | - | +| collapsedMarkerWidth | 图片宽度 | number | - | +| collapsedMarkerHeight | 图标高度 | number | - | +| collapsedMarkerRadius | 图标圆角半径 | number | 0 | +| collapsedMarkerText | 图标文字 | string | - | +| collapsedMarkerFill | 图标文字颜色 | string | - | +| collapsedMarkerFontSize | 图标字体大小 | number | 16 | +| collapsedMarkerFontWeight | 图标字体粗细 | number | string | `normal` | +| `collapsedMarker${StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 collapsedMarkerFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | ### 标签样式 label @@ -116,7 +116,7 @@ const graph = new Graph({ ## 状态样式属性 state -在一些交互行为中，比如点击选中一个节点或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。 +在一些交互行为中，比如点击选中一个组合或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。 G6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。 @@ -166,6 +166,73 @@ createGraph( ## 动画属性 animation +定义组合的动画效果，支持下列两种配置方式： + +1. 关闭组合全部动画 + +```json +{ + "combo": { + "animation": false + } +} +``` + +2. 配置阶段动画 + +阶段动画是指组合在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括： + +- `enter`: 组合进入画布时的动画 +- `update`: 组合更新时的动画 +- `exit`: 组合离开画布时的动画 +- `show`: 组合从隐藏状态显示时的动画 +- `hide`: 组合隐藏时的动画 +- `collapse`: 组合收起时的动画 +- `expand`: 组合展开时的动画 + +你可以参考 [动画范式](/manual/core-concept/animation#动画范式) 使用动画语法来配置组合，如： + +```json +{ + "combo": { + "animation": { + "update": [ + { + "fields": ["x", "y"], // 更新时只对 x 和 y 属性进行动画 + "duration": 1000, // 动画持续时间 + "easing": "linear" // 缓动函数 + } + ], + } +} +``` + +也可以使用内置的动画效果： + +```json +{ + "combo": { + "animation": { + "enter": "fade", // 使用渐变动画 + "update": "translate", // 使用平移动画 + "exit": "fade" // 使用渐变动画 + } + } +} +``` + +你可以传入 false 来关闭特定阶段的动画： + +```json +{ + "combo": { + "animation": { + "enter": false // 关闭组合入场动画 + } + } +} +``` + ## 色板属性 palette 定义组合的色板，即预定义组合颜色池，并根据规则进行分配，将颜色映射到 `fill` 属性。 @@ -179,7 +246,7 @@ createGraph( | color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string | string[] | - | | invert | 是否反转色板 | boolean | false | -如将一组数据按 `category` 字段分配节点颜色，使得同类别的节点颜色相同： +如将一组数据按 `category` 字段分配组合颜色，使得同类别的组合颜色相同： ```json { diff --git a/packages/site/docs/api/elements/edges/BaseEdge.en.md b/packages/site/docs/api/elements/edges/BaseEdge.en.md index e7935b9f492..6bbcc2f14ca 100644 --- a/packages/site/docs/api/elements/edges/BaseEdge.en.md +++ b/packages/site/docs/api/elements/edges/BaseEdge.en.md @@ -64,14 +64,14 @@ Below is a breakdown of style configurations: | labelText | The content of the label text | string | - | | labelFill | The color of the label text | string | - | | labelFontSize | The font size of the label text | number | 12 | -| labelFontWeight | The weight of the font for the label text | number \| string | `normal` | -| labelPlacement | The position of the label relative to the edge, e.g., `start`, `center`, `end`, or a specific ratio (0-1) | `start` \| `center` \| `end` \| number | `center` | +| labelFontWeight | The weight of the font for the label text | number | string | `normal` | +| labelPlacement | The position of the label relative to the edge, e.g., `start`, `center`, `end`, or a specific ratio (0-1) | `start` | `center` | `end` | number | `center` | | labelOffsetX | The offset of the label on the x-axis | number | 0 | | labelOffsetY | The offset of the label on the y-axis | number | 0 | | labelWordWrap | Whether the label text should automatically wrap when it exceeds the maximum width | boolean | false | -| labelMaxWidth | The maximum width of the label, either as a percentage of the edge width or in pixels | number \| string | `200%` | +| labelMaxWidth | The maximum width of the label, either as a percentage of the edge width or in pixels | number | string | `200%` | | labelMaxLines | The maximum number of lines for the label text | number | 1 | -| labelPadding | The padding inside the label | number \| number[] | 0 | +| labelPadding | The padding inside the label | number | number[] | 0 | | `label${StyleProps}` | More style configurations for the label, e.g., font size and color, refer to [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) | - | | labelBackground | Whether to display a background for the label | boolean | false | | labelBackgroundFill | The fill color for the label's background | string | - | @@ -91,46 +91,46 @@ Below is a breakdown of style configurations: | Attribute | Description | Type | Default Value | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------- | | badge | Whether to display a badge on the edge | boolean | true | -| badgePlacement | The placement of the badge relative to the edge. If not specified, it defaults to a clockwise arrangement from the top-right corner | `prefix` \| `suffix` | `prefix` | +| badgePlacement | The placement of the badge relative to the edge. If not specified, it defaults to a clockwise arrangement from the top-right corner | `prefix` | `suffix` | `prefix` | | badgeOffsetX | The offset of the badge on the x-axis | number | 0 | | badgeOffsetY | The offset of the badge on the y-axis | number | 0 | | badgeText | The text content of the badge | string | - | | badgeFill | The color of the badge text | string | - | | badgeFontSize | The font size of the badge text | number | 8 | -| badgeFontWeight | The font weight of the badge text | number \| string | `normal` | -| badgePadding | The padding inside the badge | number \| number[] | 0 | +| badgeFontWeight | The font weight of the badge text | number | string | `normal` | +| badgePadding | The padding inside the badge | number | number[] | 0 | | `badge${StyleProps}` | Additional style configurations for the badge, refer to [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) | - | | badgeBackground | Whether to display a background behind the badge | boolean | true | | badgeBackgroundFill | The fill color for the badge background | string | - | -| badgeBackgroundRadius | The corner radius for the badge background, defined as a single value, an array for each corner, or a string (similar to CSS padding) | number \| number[] \| string | 0 | +| badgeBackgroundRadius | The corner radius for the badge background, defined as a single value, an array for each corner, or a string (similar to CSS padding) | number | number[] | string | 0 | ### Start Arrow Style -| Attribute | Description | Type | Default Value | -| ---------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| startArrow | Whether to display the start arrow on the edge | boolean | false | -| startArrowOffset | The offset of the start arrow | number | 0 | -| startArrowSize | The size of the start arrow | number \| [number, number] | 8 | -| startArrowType | The type of the start arrow | `triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple` \| ((width: number, height: number) => PathArray) | `triangle` | +| Attribute | Description | Type | Default Value | +| ---------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| startArrow | Whether to display the start arrow on the edge | boolean | false | +| startArrowOffset | The offset of the start arrow | number | 0 | +| startArrowSize | The size of the start arrow | number | [number, number] | 8 | +| startArrowType | The type of the start arrow | `triangle` | `circle` | `diamond` | `vee` | `rect` | `triangleRect` | `simple` | ((width: number, height: number) => PathArray) | `triangle` | ### End Arrow Style -| Attribute | Description | Type | Default Value | -| -------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| endArrow | Whether to display the end arrow of the edge | boolean | false | -| endArrowOffset | The offset for the end arrow | number | 0 | -| endArrowSize | The size of the end arrow | number \| [number, number] | 8 | -| endArrowType | The type of the end arrow | `triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple` \| ((width: number, height: number) => PathArray) | `triangle` | +| Attribute | Description | Type | Default Value | +| -------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| endArrow | Whether to display the end arrow of the edge | boolean | false | +| endArrowOffset | The offset for the end arrow | number | 0 | +| endArrowSize | The size of the end arrow | number | [number, number] | 8 | +| endArrowType | The type of the end arrow | `triangle` | `circle` | `diamond` | `vee` | `rect` | `triangleRect` | `simple` | ((width: number, height: number) => PathArray) | `triangle` | ### Loop Edge Style -| Attribute | Description | Type | Default Value | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| loop | Whether to enable loop edges | boolean | true | -| loopClockwise | Whether to draw the loop clockwise | boolean | true | -| loopDist | The distance from the node's keyShape edge to the top of the loop, which defines the curvature | number | - | -| loopPlacement | The position of the loop edge relative to the node | 'left' \| 'right' \| 'top' \| 'bottom' \| 'left-top' \| 'left-bottom' \| 'right-top' \| 'right-bottom' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top' | -| `loop${StyleProps}` | Additional style configurations for loop edges, refer to [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | - | +| Attribute | Description | Type | Default Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| loop | Whether to enable loop edges | boolean | true | +| loopClockwise | Whether to draw the loop clockwise | boolean | true | +| loopDist | The distance from the node's keyShape edge to the top of the loop, which defines the curvature | number | - | +| loopPlacement | The position of the loop edge relative to the node | 'left' | 'right' | 'top' | 'bottom' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | +| `loop${StyleProps}` | Additional style configurations for loop edges, refer to [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | - | ## State Style Attributes (state) diff --git a/packages/site/docs/api/elements/edges/BaseEdge.zh.md b/packages/site/docs/api/elements/edges/BaseEdge.zh.md index 4f5e055a5bd..9b657d39aad 100644 --- a/packages/site/docs/api/elements/edges/BaseEdge.zh.md +++ b/packages/site/docs/api/elements/edges/BaseEdge.zh.md @@ -64,14 +64,14 @@ const graph = new Graph({ | labelText | 标签文字内容 | string | - | | labelFill | 标签文字颜色 | string | - | | labelFontSize | 标签字体大小 | number | 12 | -| labelFontWeight | 标签字体粗细 | number \| string | `normal` | -| labelPlacement | 标签相对于边的位置。取值范围为 `start`、`center`、`end` 或特定比率（数字 0-1） | `start` \| `center` \| `end` \| number | `center` | +| labelFontWeight | 标签字体粗细 | number | string | `normal` | +| labelPlacement | 标签相对于边的位置。取值范围为 `start`、`center`、`end` 或特定比率（数字 0-1） | `start` | `center` | `end` | number | `center` | | labelOffsetX | 标签在 x 轴方向上的偏移量 | number | 0 | | labelOffsetY | 标签在 y 轴方向上的偏移量 | number | 0 | | labelWordWrap | 是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | -| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于边宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过边宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number \| string | `200%` | +| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于边宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过边宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number | string | `200%` | | labelMaxLines | 最大行数 | number | 1 | -| labelPadding | 标签内边距 | number \| number[] | 0 | +| labelPadding | 标签内边距 | number | number[] | 0 | | `label${StyleProps}` | 更多标签样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值。例如 labelFontSize 代表标签文字大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | | labelBackground | 是否显示背景 | boolean | false | | labelBackgroundFill | 标签背景填充色 | string | - | @@ -92,47 +92,47 @@ const graph = new Graph({ | 属性 | 描述 | 类型 | 默认值 | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | | badge | 是否显示边徽标 | boolean | true | -| badgePlacement | 徽标相对于边主图形的位置。若不指定，默认从右上角顺时针依次排放 | `prefix` \| `suffix` | `prefix` | +| badgePlacement | 徽标相对于边主图形的位置。若不指定，默认从右上角顺时针依次排放 | `prefix` | `suffix` | `prefix` | | badgeOffsetX | 徽标在 x 轴方向上的偏移量 | number | 0 | | badgeOffsetY | 徽标在 y 轴方向上的偏移量 | number | 0 | | badgeText | 文字内容 | string | - | | badgeFill | 文字颜色 | string | - | | badgeFontSize | 字体大小 | number | 8 | -| badgeFontWeight | 字体粗细 | number \| string | `normal` | -| badgePadding | 内边距 | number \| number[] | 0 | +| badgeFontWeight | 字体粗细 | number | string | `normal` | +| badgePadding | 内边距 | number | number[] | 0 | | `badge${StyleProps}` | 更多徽标文字样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | | badgeBackground | 是否显示背景 | boolean | true | | badgeBackgroundFill | 背景填充色。若不指定，优先考虑 badgePalette 按顺序分配 | string | - | -| badgeBackgroundRadius | 背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | +| badgeBackgroundRadius | 背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number | number[] | string | 0 | | `badgeBackground${StyleProps}` | 更多徽标背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 badgeBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | | ### 起始箭头样式 startArrow -| 属性 | 描述 | 类型 | 默认值 | -| ---------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -| startArrow | 是否显示边的起始箭头 | boolean | false | -| startArrowOffset | 起始箭头的偏移量 | number | 0 | -| startArrowSize | 箭头大小 | number \| [number, number] | 8 | -| startArrowType | 箭头类型 | `triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple` \| ((width: number, height: number) => PathArray) | `triangle` | +| 属性 | 描述 | 类型 | 默认值 | +| ---------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | +| startArrow | 是否显示边的起始箭头 | boolean | false | +| startArrowOffset | 起始箭头的偏移量 | number | 0 | +| startArrowSize | 箭头大小 | number | [number, number] | 8 | +| startArrowType | 箭头类型 | `triangle` | `circle` | `diamond` | `vee` | `rect` | `triangleRect` | `simple` | ((width: number, height: number) => PathArray) | `triangle` | ### 终点箭头样式 endArrow -| 属性 | 描述 | 类型 | 默认值 | -| -------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -| endArrow | 是否显示边的结束箭头 | boolean | false | -| endArrowOffset | 结束箭头的偏移量 | number | 0 | -| endArrowSize | 箭头大小 | number \| [number, number] | 8 | -| endArrowType | 箭头类型 | `triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple` \| ((width: number, height: number) => PathArray) | `triangle` | +| 属性 | 描述 | 类型 | 默认值 | +| -------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | +| endArrow | 是否显示边的结束箭头 | boolean | false | +| endArrowOffset | 结束箭头的偏移量 | number | 0 | +| endArrowSize | 箭头大小 | number | [number, number] | 8 | +| endArrowType | 箭头类型 | `triangle` | `circle` | `diamond` | `vee` | `rect` | `triangleRect` | `simple` | ((width: number, height: number) => PathArray) | `triangle` | ### 自环边样式 loop -| 属性 | 描述 | 类型 | 默认值 | -| ------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -| loop | 是否启用自环边 | boolean | true | -| loopClockwise | 指定是否顺时针绘制环 | boolean | true | -| loopDist | 从节点 keyShape 边缘到自环顶部的距离，用于指定自环的曲率，默认为宽度或高度的最大值 | number | | -| loopPlacement | 边的位置 | 'left' \| 'right' \| 'top' \| 'bottom' \| 'left-top' \| 'left-bottom' \| 'right-top' \| 'right-bottom' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top' | -| `loop${StyleProps}` | 更多样式配置，请参考 [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) 配置值 | [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) | - | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | +| loop | 是否启用自环边 | boolean | true | +| loopClockwise | 指定是否顺时针绘制环 | boolean | true | +| loopDist | 从节点 keyShape 边缘到自环顶部的距离，用于指定自环的曲率，默认为宽度或高度的最大值 | number | | +| loopPlacement | 边的位置 | 'left' | 'right' | 'top' | 'bottom' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | +| `loop${StyleProps}` | 更多样式配置，请参考 [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) 配置值 | [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) | - | ## 状态样式属性 state