From 80627e62775562e25dc9c68fae89360cb61fa715 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Thu, 28 Nov 2024 16:51:34 +0800 Subject: [PATCH 01/14] docs: node configuration options --- packages/g6/src/elements/nodes/base-node.ts | 2 + .../docs/api/elements/nodes/BaseNode.en.md | 315 ++++++++++++++++++ .../docs/api/elements/nodes/BaseNode.zh.md | 315 ++++++++++++++++++ packages/site/src/MarkdownDocumenter.ts | 6 +- 4 files changed, 636 insertions(+), 2 deletions(-) create mode 100644 packages/site/docs/api/elements/nodes/BaseNode.en.md create mode 100644 packages/site/docs/api/elements/nodes/BaseNode.zh.md diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts index 410c637b9bb..94c85fabed6 100644 --- a/packages/g6/src/elements/nodes/base-node.ts +++ b/packages/g6/src/elements/nodes/base-node.ts @@ -85,6 +85,7 @@ export interface BaseNodeStyleProps * 仅在树图中生效 * * Only valid in the tree graph + * @ignore */ childrenNode?: ID[]; /** @@ -95,6 +96,7 @@ export interface BaseNodeStyleProps * 仅在树图中生效。如果当前节点为收起状态，children 可能为空，通过 childrenData 能够获取完整的子元素数据 * * Only valid in the tree graph. If the current node is collapsed, children may be empty, and the complete child element data can be obtained through childrenData + * @ignore */ childrenData?: NodeData[]; /** diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md new file mode 100644 index 00000000000..8fc3b65feb2 --- /dev/null +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -0,0 +1,315 @@ +--- +title: Node Configuration Options +order: 0 +--- + +This document introduces node property configuration. + +| Property | Description | Type | Default Value | +| --------- | ------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | +| type | Node type, either a built-in node type name or a custom node name | string | `circle` | +| style | Node style, including color, size, etc. | [Style](#style-properties-style) | - | +| state | Defines styles for nodes in different states | Record | - | +| palette | Defines the color palette for nodes, used to map colors to different data | [Palette](#palette-properties-palette) | - | +| animation | Defines animation effects for nodes | [Animation](#animation-properties) | - | + +## Type Property `type` + +Specifies the node type, either a built-in node type name or a custom node name. Defaults to `circle`. For more built-in supported node types, refer to the [Node Registry](https://g6.antv.antgroup.com/manual/getting-started/extensions#%E8%8A%82%E7%82%B9). + +## Style Property `style` + +Defines the node's style, including color, size, etc. + + + +> For an in-depth understanding of node composition, read [Core Concepts - Element](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%8A%82%E7%82%B9%E6%9E%84%E6%88%90). + +The following style configurations will be explained sequentially based on atomic graphics: + +### Main Graphic Style `key` + +| Property | Description | Type | Default Value | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------- | +| x | x-coordinate | number | 0 | +| y | y-coordinate | number | 0 | +| z | z-coordinate | number | 0 | +| size | Node size, a shortcut to set the width, height, and depth of the node
- If the value is a number, it sets the same width, height, and depth for the node
- If the value is an array, it specifies width, height, and depth sequentially | number \| [number, number] \| Float32Array \| [number, number, number] | 32 | +| fill | Fill color | string | `#1783FF` | +| stroke | Stroke color | string | `#000` | +| lineWidth | Stroke width | number \| string | 1 | +| collapsed | Whether the current node/group is expanded | boolean | false | +| `${StyleProps}` | Additional graphic configuration, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main graphic's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | + +### Label Style `label` + +| Property | Description | Type | Default Value | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| label | Whether to display the node label | boolean | true | +| labelText | Label text content | string | - | +| labelFill | Label text color | string | - | +| labelFontSize | Label font size | number | 12 | +| labelFontWeight | Label font weight | number \| string | `normal` | +| labelPlacement | Label position relative to the main graphic of the node | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` \| `center` | `bottom` | +| labelOffsetX | Label offset in the x-axis direction | number | 0 | +| labelOffsetY | Label offset in the y-axis direction | number | 0 | +| labelWordWrap | Whether to enable word wrapping. When `labelWordWrap` is enabled, content exceeding `labelMaxWidth` automatically wraps | boolean | false | +| labelMaxWidth | Maximum label width. When word wrapping is enabled, the label wraps at this width
- `string`: Defines the maximum width as a percentage of the node width, e.g., `50%` means the label width does not exceed half of the node width
- `number`: Defines the maximum width in pixels, e.g., `100` means the maximum label width is 100 pixels | number \| string | `200%` | +| labelMaxLines | Maximum number of lines | number | 1 | +| labelPadding | Padding inside the label | number \| number[] | 0 | +| `label${StyleProps}` | Additional label style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text). For instance, `labelFontSize` specifies the label font size | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| labelBackground | Whether to display a background | boolean | false | +| labelBackgroundFill | Label background fill color | string | - | +| labelBackgroundRadius | Label background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets the radius for each corner, completing missing values
- `string`: Similar to the CSS `padding` property, values are separated by spaces | number \| number[] \| string | 0 | +| `labelBackground${StyleProps}` | Additional label background style configuration, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `labelBackgroundFillOpacity` specifies the transparency of the label background | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | + +### Halo Style `halo` + +| Property | Description | Type | Default Value | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------- | +| halo | Whether to display a halo effect around the node | boolean | false | +| haloFill | Halo fill color | string | Same as the fill color of the main graphic | +| haloStroke | Halo stroke color | string | Same as the stroke color of the main graphic | +| haloLineWidth | Halo stroke width | number | 3 | +| `halo${StyleProps}` | Additional halo style configuration, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object). For instance, `haloFillOpacity` specifies the transparency of the halo's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | + +### Icon Style `icon` + +| Property | Description | Type | Default Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | +| icon | Whether to display an icon on the node | boolean | true | +| iconSrc | Image source. Overrides `iconText` | string | - | +| iconWidth | Image width | number | Half of the main graphic's width | +| iconHeight | Icon height | number | Half of the main graphic's height | +| iconRadius | Icon corner radius | number | 0 | +| iconText | Icon text | string | - | +| iconFill | Icon text color | string | - | +| iconFontSize | Icon font size | number | 16 | +| iconFontWeight | Icon font weight | number \| string | `normal` | +| `icon${StyleProps}` | Additional icon style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) \| [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | + +### Badge Style `badges` + +| Property | Description | Type | Default Value | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | --------------------------------- | +| badge | Whether to display node badges | boolean | true | +| badges | Sets the badges | [BadgeStyleProps](#badgestyleprops)[] | - | +| badgePalette | Background color palette for badges | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] | +| `badge${StyleProps} ` | General badge style configurations applied to each badge individually. Badge-specific styles in `badges` take precedence over this setting | [BadgeStyleProps](#badgestyleprops) | - | + +#### BadgeStyleProps + +| Property | Description | Type | Default Value | +| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| placement | Badge position relative to the main graphic of the node. If unspecified, badges are placed clockwise starting from the top-right corner by default | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` | - | +| offsetX | Horizontal offset for the badge | number | 0 | +| offsetY | Vertical offset for the badge | number | 0 | +| text | Text content for the badge | string | - | +| fill | Text color | string | - | +| fontSize | Font size | number | 8 | +| fontWeight | Font weight | number \| string | `normal` | +| padding | Padding inside the badge | number \| number[] | 0 | +| `${StyleProps}` | Additional text style configurations. Refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| background | Whether to display a background | boolean | true | +| backgroundFill | Background fill color. If unspecified, the colors are assigned sequentially from `badgePalette` | string | - | +| backgroundRadius | Background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets individual corner radii, completing any missing values
- `string`: Similar to the CSS `padding` property with space-separated values | number \| number[] \| string | 0 | +| `background${StyleProps}` | Additional background style configurations. Refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `backgroundFillOpacity` adjusts the transparency of the background color | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | + +Example: Adding three badges with different meanings to a node: + +```json +{ + "badge": true, + "badges": [ + { "text": "A", "placement": "right-top" }, + { "text": "Important", "placement": "right" }, + { "text": "Notice", "placement": "right-bottom" } + ], + "badgePalette": ["#7E92B5", "#F4664A", "#FFBE3A"], + "badgeFontSize": 7 +} +``` + +The resulting effect is as follows: + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', states: ['focus'] }], + }, + node: { + style: { + badge: true, + badges: [ + { text: 'A', placement: 'right-top' }, + { text: 'Important', placement: 'right' }, + { text: 'Notice', placement: 'right-bottom' }, + ], + badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], + badgeFontSize: 7, + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +### Port Style `ports` + +| Property | Description | Type | Default Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- | ------------- | +| port | Whether to display connection ports | boolean | true | +| ports | Connection port configurations, supporting multiple ports | [PortStyleProps](#portstyleprops)[] | - | +| `port${StyleProps}` | Additional connection port styles. Refer to [PortStyleProps](#portstyleprops). For example, `portR` specifies the radius of circular ports | [PortStyleProps](#portstyleprops) | - | + +#### PortStyleProps + +| Property | Description | Type | Default Value | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------- | +| r | Port radius
- If undefined, the port is treated as a point, not visible on the canvas, but edges will connect to the nearest port
- If a number, the port is treated as a circle with the specified radius | number | - | +| linkToCenter | Whether edges connect to the center of the port.
- If `true`, edges connect to the center
- If `false`, edges connect to the port's boundary | boolean | false | +| `${StyleProps}` | Additional port styles. Refer to [CircleStyleProps](https://g.antv.antgroup.com/api/basic/circle) | [CircleStyleProps](https://g.antv.antgroup.com/api/basic/circle) | - | + +Example: Adding four connection ports to a node: + +```json +{ + "port": true, + "ports": [ + { "key": "top", "placement": "top", "fill": "#7E92B5" }, + { "key": "right", "placement": "right", "fill": "#F4664A" }, + { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" }, + { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" } + ], + "portR": 3, + "portLineWidth": 1, + "portStroke": "#fff" +} +``` + +The resulting effect is as follows: + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', states: ['focus'] }], + }, + node: { + style: { + port: true, + ports: [ + { key: 'top', placement: 'top', fill: '#7E92B5' }, + { key: 'right', placement: 'right', fill: '#F4664A' }, + { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' }, + { key: 'left', placement: [0, 0.5], fill: '#D580FF' }, + ], + portR: 3, + portLineWidth: 1, + portStroke: '#fff', + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +## State Style Properties `state` + +In certain interactive behaviors, such as selecting a node by clicking or activating an edge by hovering, the element merely undergoes a state change to indicate its status. To visually reflect these state changes for end users, different graphical styles must be defined for each state, which respond to state transitions of the element. + +G6 provides several built-in states, including **selected**, **highlight**, **active**, **inactive**, and **disabled**. Additionally, it supports custom states to meet specific needs. Developers can define a set of style rules for each state, which override the default styles of the element. + + + +For example, when a node is in the `focus` state, a stroke with a width of 3 and the color orange can be added. + +```json +{ + "node": { + "state": { + "focus": { + "lineWidth": 3, + "stroke": "orange" + } + } + } +} +``` + +The resulting effect is as follows: + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', states: ['focus'] }], + }, + node: { + state: { + focus: { + lineWidth: 3, + stroke: 'orange', + }, + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +## Animation `animation` + +## Palette Properties `palette` + +When defining graphical element styles, palettes enable quick assignment of colors, particularly useful for clustering, where the node's category can be visually distinguished. + +> If you are unfamiliar with palettes in G6, refer to the relevant [documentation](https://g6.antv.antgroup.com/manual/core-concept/palette). + +| Property | Description | Type | Default Value | +| -------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------- | +| type | Specifies the current palette type.
- `group`: Discrete palette
- `value`: Continuous palette | `group` \| `value` | `group` | +| field | Specifies the grouping field in the element data. If not specified, the default is the `id` field | string \| ((datum) => string) | `id` | +| color | Palette colors. If the palette is registered, its registered name can be used. Alternatively, an array of colors can be provided | string \| string[] | - | +| invert | Whether to invert the palette | boolean | false | + +Example: Configuring node colors by grouping data using the `category` field so that nodes in the same category share the same color: + +```json +{ + "node": { + "palette": { + "type": "group", + "field": "category", + "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] + } + } +} +``` + +The resulting effect is as follows: + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(10) + .fill(0) + .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 10 }, + node: { + palette: { + type: 'group', + field: 'category', + color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'], + }, + }, + }, + { width: 600, height: 100 }, +); +``` diff --git a/packages/site/docs/api/elements/nodes/BaseNode.zh.md b/packages/site/docs/api/elements/nodes/BaseNode.zh.md new file mode 100644 index 00000000000..569250cd1a4 --- /dev/null +++ b/packages/site/docs/api/elements/nodes/BaseNode.zh.md @@ -0,0 +1,315 @@ +--- +title: 节点配置项 +order: 0 +--- + +本文介绍节点属性配置。 + +| 属性 | 描述 | 类型 | 默认值 | +| --------- | -------------------------------------------- | ---------------------------------------- | -------- | +| type | 节点类型，内置节点类型名称或自定义节点的名称 | string | `circle` | +| style | 节点样式，包括颜色、大小等 | [Style](#样式属性-style) | - | +| state | 定义节点在不同状态下的样式 | Record | - | +| palette | 定义节点的色板，用于根据不同数据映射颜色 | [Palette](#色板属性-palette) | - | +| animation | 定义节点的动画效果 | [Animation](#动画-animation) | - | + +## 类型属性 type + +指定节点类型，内置节点类型名称或自定义节点的名称。默认为 `circle`。更多内置支持节点类型，可查看[节点注册表](https://g6.antv.antgroup.com/manual/getting-started/extensions#%E8%8A%82%E7%82%B9)。 + +## 样式属性 style + +定义节点的样式，包括颜色、大小等。 + + + +> 深入了解节点构成，请阅读 [核心概念 - 元素](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%8A%82%E7%82%B9%E6%9E%84%E6%88%90)。 + +以下样式配置将按原子图形依次说明： + +### 主图形样式 key + +| 属性 | 描述 | 类型 | 默认值 | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------- | +| x | x 坐标 | number | 0 | +| y | y 坐标 | number | 0 | +| z | z 坐标 | number | 0 | +| size | 节点大小，快捷设置节点宽高
- 若值为数字，则表示节点的宽度、高度以及深度相同为指定值
- 若值为数组，则按数组元素依次表示节点的宽度、高度以及深度 | number \| [number, number] \| Float32Array \| [number, number, number] | 32 | +| fill | 填充色 | string | `#1783FF` | +| stroke | 描边色 | string | `#000` | +| lineWidth | 描边宽度 | number \| string | 1 | +| collapsed | 当前节点/组合是否展开 | boolean | false | +| `${StyleProps}` | 更多图形配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | + +### 标签样式 label + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| label | 是否显示节点标签 | boolean | true | +| labelText | 标签文字内容 | string | - | +| labelFill | 标签文字颜色 | string | - | +| labelFontSize | 标签字体大小 | number | 12 | +| labelFontWeight | 标签字体粗细 | number \| string | `normal` | +| labelPlacement | 标签相对于节点主图形的位置 | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` \| `center` | `bottom` | +| labelOffsetX | 标签在 x 轴方向上的偏移量 | number | 0 | +| labelOffsetY | 标签在 y 轴方向上的偏移量 | number | 0 | +| labelWordWrap | 是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | +| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过节点宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number \| string | `200%` | +| labelMaxLines | 最大行数 | number | 1 | +| 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 | - | +| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | +| `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | + +### 光晕样式 halo + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------- | +| halo | 是否显示节点光晕 | boolean | false | +| haloFill | 光晕填充色 | string | 与主图形的填充色一致 | +| haloStroke | 光晕描边色 | string | 与主图形的填充色一致 | +| haloLineWidth | 光晕描边宽度 | number | 3 | +| `halo${StyleProps}` | 更多光晕样式配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 haloFillOpacity 代表光晕填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | + +### 图标样式 icon + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------- | +| icon | 是否显示节点图标 | boolean | true | +| iconSrc | 图片来源。其优先级高于 iconText | string | - | +| iconWidth | 图片宽度 | number | 主图形宽度的一半 | +| iconHeight | 图标高度 | number | 主图形高度的一半 | +| iconRadius | 图标圆角半径 | number | 0 | +| iconText | 图标文字 | string | - | +| iconFill | 图标文字颜色 | string | - | +| iconFontSize | 图标字体大小 | number | 16 | +| iconFontWeight | 图标字体粗细 | number \| string | `normal` | +| `icon${StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 iconFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) \| [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | + +### 徽标样式 badges + +| 属性 | 描述 | 类型 | 默认值 | +| --------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------- | --------------------------------- | +| badge | 是否显示节点徽标 | boolean | true | +| badges | 设置徽标 | [BadgeStyleProps](#badgestyleprops)[] | - | +| badgePalette | 徽标的背景色板 | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] | +| `badge${StyleProps} ` | 徽标通用样式配置，会被独立应用于每一个徽标元素中。若在badges 中有特定的样式定义，其优先级将高于此处 | [BadgeStyleProps](#badgestyleprops) | - | + +#### BadgeStyleProps + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| placement | 徽标相对于节点主图形的位置。若不指定，默认从右上角顺时针依次排放 | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` | - | +| offsetX | 徽标在 x 轴方向上的偏移量 | number | 0 | +| offsetY | 徽标在 y 轴方向上的偏移量 | number | 0 | +| text | 文字内容 | string | - | +| fill | 文字颜色 | string | - | +| fontSize | 字体大小 | number | 8 | +| fontWeight | 字体粗细 | number \| string | `normal` | +| padding | 内边距 | number \| number[] | 0 | +| `${StyleProps}` | 更多文字样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| background | 是否显示背景 | boolean | true | +| backgroundFill | 背景填充色。若不指定，优先考虑 badgePalette 按顺序分配 | string | - | +| backgroundRadius | 背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | +| `background${StyleProps}` | 更多背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | + +例如，给一个节点添加三个不同含义的徽标： + +```json +{ + "badge": true, + "badges": [ + { "text": "A", "placement": "right-top" }, + { "text": "Important", "placement": "right" }, + { "text": "Notice", "placement": "right-bottom" } + ], + "badgePalette": ["#7E92B5", "#F4664A", "#FFBE3A"], + "badgeFontSize": 7 +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', states: ['focus'] }], + }, + node: { + style: { + badge: true, + badges: [ + { text: 'A', placement: 'right-top' }, + { text: 'Important', placement: 'right' }, + { text: 'Notice', placement: 'right-bottom' }, + ], + badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], + badgeFontSize: 7, + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +### 连接桩样式 ports + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------- | ------ | +| port | 是否显示连接桩 | boolean | true | +| ports | 连接桩配置项，支持配置多个连接桩 | [PortStyleProps](#portstyleprops)[] | | +| `port${StyleProps}` | 更多连接桩样式配置，请参考 [PortStyleProps](#portstyleprops)。例如 portR 代表圆形连接桩的半径 | [PortStyleProps](#portstyleprops) | - | + +#### PortStyleProps + +| 属性 | 描述 | 类型 | 默认值 | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- | ------ | +| r | 连接桩半径
- 如果设置为 undefined，则连接桩被视为一个点，不在画布上显示但存在，边会优先连接到最近的连接桩
- 如果设置为数字，则连接桩被视为一个圆，圆的半径由此处指定 | number | - | +| linkToCenter | 边是否连接到连接桩的中心
- 若为 true，则边连接到连接桩的中心
- 若为 false，则边连接到连接桩的边缘 | boolean | false | +| `${StyleProps}` | 更多连接桩样式配置，请参考 [CircleStyleProps](https://g.antv.antgroup.com/api/basic/circle) | [CircleStyleProps](https://g.antv.antgroup.com/api/basic/circle) | - | + +例如，给一个节点显示添加四个连接桩： + +```json +{ + "port": true, + "ports": [ + { "key": "top", "placement": "top", "fill": "#7E92B5" }, + { "key": "right", "placement": "right", "fill": "#F4664A" }, + { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" }, + { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" } + ], + "portR": 3, + "portLineWidth": 1, + "portStroke": "#fff" +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', states: ['focus'] }], + }, + node: { + style: { + port: true, + ports: [ + { key: 'top', placement: 'top', fill: '#7E92B5' }, + { key: 'right', placement: 'right', fill: '#F4664A' }, + { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' }, + { key: 'left', placement: [0, 0.5], fill: '#D580FF' }, + ], + portR: 3, + portLineWidth: 1, + portStroke: '#fff', + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +## 状态样式属性 state + +在一些交互行为中，比如点击选中一个节点或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。 + +G6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。 + + + +例如，当节点处于 `focus` 状态时，可以为其添加一个宽度为 3 且颜色为橙色的描边。 + +```json +{ + "node": { + "state": { + "focus": { + "lineWidth": 3, + "stroke": "orange" + } + } + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', states: ['focus'] }], + }, + node: { + state: { + focus: { + lineWidth: 3, + stroke: 'orange', + }, + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +## 动画 animation + +## 色板属性 palette + +在定义图元素样式时，色板能够快速指定节点颜色，尤其在聚类时，可以直观地展示节点的类别。 + +> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](https://g6.antv.antgroup.com/manual/core-concept/palette)。 + +| 属性 | 描述 | 类型 | 默认值 | +| ------ | ------------------------------------------------------------------- | ----------------------------- | ------ | --- | ------- | +| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` \| `value` | `` | `` | `group` | +| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string \| ((datum) => string) | `id` | +| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string \| string[] | - | +| invert | 是否反转色板 | boolean | false | + +例如，将一组数据根据 `category` 字段配置节点的颜色，使得同类别的节点颜色相同： + +```json +{ + "node": { + "palette": { + "type": "group", + "field": "category", + "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] + } + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(10) + .fill(0) + .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 10 }, + node: { + palette: { + type: 'group', + field: 'category', + color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'], + }, + }, + }, + { width: 600, height: 100 }, +); +``` diff --git a/packages/site/src/MarkdownDocumenter.ts b/packages/site/src/MarkdownDocumenter.ts index db91f288eea..2fec50a104e 100644 --- a/packages/site/src/MarkdownDocumenter.ts +++ b/packages/site/src/MarkdownDocumenter.ts @@ -495,6 +495,10 @@ export class MarkdownDocumenter { } private async _writeElementPage(pageData: IPageData) { + const isBase = pageData.name.startsWith('Base'); + // BaseNodeStyleProps 跳过自动生成 + if (isBase) return; + const configuration: TSDocConfiguration = this._tsdocConfiguration; const output: DocSection = new DocSection({ configuration }); @@ -503,8 +507,6 @@ export class MarkdownDocumenter { const apiInterface = pageData.apiItems.find((apiItem) => apiItem instanceof ApiInterface) as ApiInterface; const apiClass = pageData.apiItems.find((apiItem) => apiItem instanceof ApiClass) as ApiClass; - const isBase = pageData.name.startsWith('Base'); - if (apiClass && !isBase) { this._writeRemarksSection(output, apiClass); } From c5af16da92bf693f541f37148f20e8941da69bef Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Thu, 28 Nov 2024 19:12:10 +0800 Subject: [PATCH 02/14] docs: modify node --- .../docs/api/elements/nodes/BaseNode.zh.md | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/site/docs/api/elements/nodes/BaseNode.zh.md b/packages/site/docs/api/elements/nodes/BaseNode.zh.md index 569250cd1a4..80fd851b5a6 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.zh.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.zh.md @@ -3,7 +3,21 @@ title: 节点配置项 order: 0 --- -本文介绍节点属性配置。 +本文介绍节点属性配置，配置位置如下： + +```js {5-9} +import { Graph } from '@antv/g6'; + +const graph = new Graph({ + node: { + type: 'circle', + style: {}, + state: {}, + palette: {}, + animation: {}, + }, +}); +``` | 属性 | 描述 | 类型 | 默认值 | | --------- | -------------------------------------------- | ---------------------------------------- | -------- | @@ -37,7 +51,7 @@ order: 0 | size | 节点大小，快捷设置节点宽高
- 若值为数字，则表示节点的宽度、高度以及深度相同为指定值
- 若值为数组，则按数组元素依次表示节点的宽度、高度以及深度 | number \| [number, number] \| Float32Array \| [number, number, number] | 32 | | fill | 填充色 | string | `#1783FF` | | stroke | 描边色 | string | `#000` | -| lineWidth | 描边宽度 | number \| string | 1 | +| lineWidth | 描边宽度 | number | 1 | | collapsed | 当前节点/组合是否展开 | boolean | false | | `${StyleProps}` | 更多图形配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | @@ -262,7 +276,7 @@ createGraph( ); ``` -## 动画 animation +## 动画属性 animation ## 色板属性 palette From 8293589877c3592f141715209fdd83c0c3c26415 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 28 Nov 2024 20:20:33 +0800 Subject: [PATCH 03/14] docs: add node animation doc --- .../docs/api/elements/nodes/BaseNode.en.md | 200 +++++++++++------ .../docs/api/elements/nodes/BaseNode.zh.md | 203 ++++++++++++------ 2 files changed, 270 insertions(+), 133 deletions(-) diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md index 8fc3b65feb2..354810391ee 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.en.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -15,7 +15,7 @@ This document introduces node property configuration. ## Type Property `type` -Specifies the node type, either a built-in node type name or a custom node name. Defaults to `circle`. For more built-in supported node types, refer to the [Node Registry](https://g6.antv.antgroup.com/manual/getting-started/extensions#%E8%8A%82%E7%82%B9). +Specifies the node type, either a built-in node type name or a custom node name. Defaults to `circle`. For more built-in supported node types, refer to the [Node Registry](/en/manual/getting-started/extensions#nodes). ## Style Property `style` @@ -23,45 +23,45 @@ Defines the node's style, including color, size, etc. -> For an in-depth understanding of node composition, read [Core Concepts - Element](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%8A%82%E7%82%B9%E6%9E%84%E6%88%90). +> For an in-depth understanding of node composition, read [Core Concepts - Element](/en/manual/core-concept/element). The following style configurations will be explained sequentially based on atomic graphics: ### Main Graphic Style `key` -| Property | Description | Type | Default Value | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------- | -| x | x-coordinate | number | 0 | -| y | y-coordinate | number | 0 | -| z | z-coordinate | number | 0 | -| size | Node size, a shortcut to set the width, height, and depth of the node
- If the value is a number, it sets the same width, height, and depth for the node
- If the value is an array, it specifies width, height, and depth sequentially | number \| [number, number] \| Float32Array \| [number, number, number] | 32 | -| fill | Fill color | string | `#1783FF` | -| stroke | Stroke color | string | `#000` | -| lineWidth | Stroke width | number \| string | 1 | -| collapsed | Whether the current node/group is expanded | boolean | false | -| `${StyleProps}` | Additional graphic configuration, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main graphic's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | +| Property | Description | Type | Default Value | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------- | +| x | x-coordinate | number | 0 | +| y | y-coordinate | number | 0 | +| z | z-coordinate | number | 0 | +| size | Node size, a shortcut to set the width, height, and depth of the node
- If the value is a number, it sets the same width, height, and depth for the node
- If the value is an array, it specifies width, height, and depth sequentially | number | [number, number] | Float32Array | [number, number, number] | 32 | +| fill | Fill color | string | `#1783FF` | +| stroke | Stroke color | string | `#000` | +| lineWidth | Stroke width | number | string | 1 | +| collapsed | Whether the current node/group is expanded | boolean | false | +| `${StyleProps}` | Additional graphic configuration, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main graphic's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | ### Label Style `label` -| Property | Description | Type | Default Value | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| label | Whether to display the node label | boolean | true | -| labelText | Label text content | string | - | -| labelFill | Label text color | string | - | -| labelFontSize | Label font size | number | 12 | -| labelFontWeight | Label font weight | number \| string | `normal` | -| labelPlacement | Label position relative to the main graphic of the node | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` \| `center` | `bottom` | -| labelOffsetX | Label offset in the x-axis direction | number | 0 | -| labelOffsetY | Label offset in the y-axis direction | number | 0 | -| labelWordWrap | Whether to enable word wrapping. When `labelWordWrap` is enabled, content exceeding `labelMaxWidth` automatically wraps | boolean | false | -| labelMaxWidth | Maximum label width. When word wrapping is enabled, the label wraps at this width
- `string`: Defines the maximum width as a percentage of the node width, e.g., `50%` means the label width does not exceed half of the node width
- `number`: Defines the maximum width in pixels, e.g., `100` means the maximum label width is 100 pixels | number \| string | `200%` | -| labelMaxLines | Maximum number of lines | number | 1 | -| labelPadding | Padding inside the label | number \| number[] | 0 | -| `label${StyleProps}` | Additional label style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text). For instance, `labelFontSize` specifies the label font size | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | -| labelBackground | Whether to display a background | boolean | false | -| labelBackgroundFill | Label background fill color | string | - | -| labelBackgroundRadius | Label background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets the radius for each corner, completing missing values
- `string`: Similar to the CSS `padding` property, values are separated by spaces | number \| number[] \| string | 0 | -| `labelBackground${StyleProps}` | Additional label background style configuration, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `labelBackgroundFillOpacity` specifies the transparency of the label background | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | +| Property | Description | Type | Default Value | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| label | Whether to display the node label | boolean | true | +| labelText | Label text content | string | - | +| labelFill | Label text color | string | - | +| labelFontSize | Label font size | number | 12 | +| labelFontWeight | Label font weight | number | string | `normal` | +| labelPlacement | Label position relative to the main graphic of the node | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` | +| labelOffsetX | Label offset in the x-axis direction | number | 0 | +| labelOffsetY | Label offset in the y-axis direction | number | 0 | +| labelWordWrap | Whether to enable word wrapping. When `labelWordWrap` is enabled, content exceeding `labelMaxWidth` automatically wraps | boolean | false | +| labelMaxWidth | Maximum label width. When word wrapping is enabled, the label wraps at this width
- `string`: Defines the maximum width as a percentage of the node width, e.g., `50%` means the label width does not exceed half of the node width
- `number`: Defines the maximum width in pixels, e.g., `100` means the maximum label width is 100 pixels | number | string | `200%` | +| labelMaxLines | Maximum number of lines | number | 1 | +| labelPadding | Padding inside the label | number | number[] | 0 | +| `label${StyleProps}` | Additional label style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text). For instance, `labelFontSize` specifies the label font size | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| labelBackground | Whether to display a background | boolean | false | +| labelBackgroundFill | Label background fill color | string | - | +| labelBackgroundRadius | Label background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets the radius for each corner, completing missing values
- `string`: Similar to the CSS `padding` property, values are separated by spaces | number | number[] | string | 0 | +| `labelBackground${StyleProps}` | Additional label background style configuration, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `labelBackgroundFillOpacity` specifies the transparency of the label background | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | ### Halo Style `halo` @@ -75,18 +75,18 @@ The following style configurations will be explained sequentially based on atomi ### Icon Style `icon` -| Property | Description | Type | Default Value | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | -| icon | Whether to display an icon on the node | boolean | true | -| iconSrc | Image source. Overrides `iconText` | string | - | -| iconWidth | Image width | number | Half of the main graphic's width | -| iconHeight | Icon height | number | Half of the main graphic's height | -| iconRadius | Icon corner radius | number | 0 | -| iconText | Icon text | string | - | -| iconFill | Icon text color | string | - | -| iconFontSize | Icon font size | number | 16 | -| iconFontWeight | Icon font weight | number \| string | `normal` | -| `icon${StyleProps}` | Additional icon style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) \| [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | +| Property | Description | Type | Default Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| icon | Whether to display an icon on the node | boolean | true | +| iconSrc | Image source. Overrides `iconText` | string | - | +| iconWidth | Image width | number | Half of the main graphic's width | +| iconHeight | Icon height | number | Half of the main graphic's height | +| iconRadius | Icon corner radius | number | 0 | +| iconText | Icon text | string | - | +| iconFill | Icon text color | string | - | +| iconFontSize | Icon font size | number | 16 | +| iconFontWeight | Icon font weight | number | string | `normal` | +| `icon${StyleProps}` | Additional icon style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | ### Badge Style `badges` @@ -99,21 +99,21 @@ The following style configurations will be explained sequentially based on atomi #### BadgeStyleProps -| Property | Description | Type | Default Value | -| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| placement | Badge position relative to the main graphic of the node. If unspecified, badges are placed clockwise starting from the top-right corner by default | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` | - | -| offsetX | Horizontal offset for the badge | number | 0 | -| offsetY | Vertical offset for the badge | number | 0 | -| text | Text content for the badge | string | - | -| fill | Text color | string | - | -| fontSize | Font size | number | 8 | -| fontWeight | Font weight | number \| string | `normal` | -| padding | Padding inside the badge | number \| number[] | 0 | -| `${StyleProps}` | Additional text style configurations. Refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | -| background | Whether to display a background | boolean | true | -| backgroundFill | Background fill color. If unspecified, the colors are assigned sequentially from `badgePalette` | string | - | -| backgroundRadius | Background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets individual corner radii, completing any missing values
- `string`: Similar to the CSS `padding` property with space-separated values | number \| number[] \| string | 0 | -| `background${StyleProps}` | Additional background style configurations. Refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `backgroundFillOpacity` adjusts the transparency of the background color | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | +| Property | Description | Type | Default Value | +| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| placement | Badge position relative to the main graphic of the node. If unspecified, badges are placed clockwise starting from the top-right corner by default | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | - | +| offsetX | Horizontal offset for the badge | number | 0 | +| offsetY | Vertical offset for the badge | number | 0 | +| text | Text content for the badge | string | - | +| fill | Text color | string | - | +| fontSize | Font size | number | 8 | +| fontWeight | Font weight | number | string | `normal` | +| padding | Padding inside the badge | number | number[] | 0 | +| `${StyleProps}` | Additional text style configurations. Refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| background | Whether to display a background | boolean | true | +| backgroundFill | Background fill color. If unspecified, the colors are assigned sequentially from `badgePalette` | string | - | +| backgroundRadius | Background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets individual corner radii, completing any missing values
- `string`: Similar to the CSS `padding` property with space-separated values | number | number[] | string | 0 | +| `background${StyleProps}` | Additional background style configurations. Refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `backgroundFillOpacity` adjusts the transparency of the background color | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | Example: Adding three badges with different meanings to a node: @@ -264,18 +264,86 @@ createGraph( ## Animation `animation` +Defines the animation effect of the node, and supports the following two configuration methods: + +1. disable all animation of the node + +```json +{ + "node": { + "animation": false + } +} +``` + +2. Configuring stage animation + +Stage animation is the animation effect of a node when it enters the graph, updates, and leaves the graph. Currently supported stages include: + +- `enter`: animation when a node enters the graph +- `update`: animation when the node is updated. +- `exit`: animation when the node leaves the graph +- `show`: animation when the node is shown from hidden state +- `hide`: animation when the node is hidden. +- `collapse`: animation when the node is collapsed. +- `expand`: animation when the node is expanded. + +You can refer to [animation paradigm](/en/manual/core-concept/animation#animation-paradigm) to configure the node using the animation syntax, e.g.: + +```json +{ + "node": { + "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 +{ + "node": { + "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 +{ + "node": { + "animation": { + "enter": false // Turn off the node entry animation. + } + } +} +``` + ## Palette Properties `palette` When defining graphical element styles, palettes enable quick assignment of colors, particularly useful for clustering, where the node's category can be visually distinguished. -> If you are unfamiliar with palettes in G6, refer to the relevant [documentation](https://g6.antv.antgroup.com/manual/core-concept/palette). +> If you are unfamiliar with palettes in G6, refer to the relevant [documentation](/en/manual/core-concept/palette). -| Property | Description | Type | Default Value | -| -------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------- | -| type | Specifies the current palette type.
- `group`: Discrete palette
- `value`: Continuous palette | `group` \| `value` | `group` | -| field | Specifies the grouping field in the element data. If not specified, the default is the `id` field | string \| ((datum) => string) | `id` | -| color | Palette colors. If the palette is registered, its registered name can be used. Alternatively, an array of colors can be provided | string \| string[] | - | -| invert | Whether to invert the palette | boolean | false | +| Property | Description | Type | Default Value | +| -------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- | +| type | Specifies the current palette type.
- `group`: Discrete palette
- `value`: Continuous palette | `group` | `value` | `group` | +| field | Specifies the grouping field in the element data. If not specified, the default is the `id` field | string | ((datum) => string) | `id` | +| color | Palette colors. If the palette is registered, its registered name can be used. Alternatively, an array of colors can be provided | string | string[] | - | +| invert | Whether to invert the palette | boolean | false | Example: Configuring node colors by grouping data using the `category` field so that nodes in the same category share the same color: diff --git a/packages/site/docs/api/elements/nodes/BaseNode.zh.md b/packages/site/docs/api/elements/nodes/BaseNode.zh.md index 80fd851b5a6..c97f96b5559 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.zh.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.zh.md @@ -27,9 +27,11 @@ const graph = new Graph({ | palette | 定义节点的色板，用于根据不同数据映射颜色 | [Palette](#色板属性-palette) | - | | animation | 定义节点的动画效果 | [Animation](#动画-animation) | - | -## 类型属性 type +## 类型 type -指定节点类型，内置节点类型名称或自定义节点的名称。默认为 `circle`。更多内置支持节点类型，可查看[节点注册表](https://g6.antv.antgroup.com/manual/getting-started/extensions#%E8%8A%82%E7%82%B9)。 +指定节点类型，内置节点类型名称或自定义节点的名称。默认为 `circle`。 + +更多内置支持节点类型，可查看[节点注册表](/manual/getting-started/extensions#节点)。 ## 样式属性 style @@ -37,45 +39,45 @@ const graph = new Graph({ -> 深入了解节点构成，请阅读 [核心概念 - 元素](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%8A%82%E7%82%B9%E6%9E%84%E6%88%90)。 +> 深入了解节点构成，请阅读 [核心概念 - 元素](/manual/core-concept/element)。 以下样式配置将按原子图形依次说明： ### 主图形样式 key -| 属性 | 描述 | 类型 | 默认值 | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------- | -| x | x 坐标 | number | 0 | -| y | y 坐标 | number | 0 | -| z | z 坐标 | number | 0 | -| size | 节点大小，快捷设置节点宽高
- 若值为数字，则表示节点的宽度、高度以及深度相同为指定值
- 若值为数组，则按数组元素依次表示节点的宽度、高度以及深度 | number \| [number, number] \| Float32Array \| [number, number, number] | 32 | -| fill | 填充色 | string | `#1783FF` | -| stroke | 描边色 | string | `#000` | -| lineWidth | 描边宽度 | number | 1 | -| collapsed | 当前节点/组合是否展开 | boolean | false | -| `${StyleProps}` | 更多图形配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | +| 属性 | 描述 | 类型 | 默认值 | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | --------- | +| x | x 坐标 | number | 0 | +| y | y 坐标 | number | 0 | +| z | z 坐标 | number | 0 | +| size | 节点大小，快捷设置节点宽高
- 若值为数字，则表示节点的宽度、高度以及深度相同为指定值
- 若值为数组，则按数组元素依次表示节点的宽度、高度以及深度 | number | [number, number] | Float32Array | [number, number, number] | 32 | +| fill | 填充色 | string | `#1783FF` | +| stroke | 描边色 | string | `#000` | +| lineWidth | 描边宽度 | number | 1 | +| collapsed | 当前节点/组合是否展开 | boolean | false | +| `${StyleProps}` | 更多图形配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | ### 标签样式 label -| 属性 | 描述 | 类型 | 默认值 | -| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| label | 是否显示节点标签 | boolean | true | -| labelText | 标签文字内容 | string | - | -| labelFill | 标签文字颜色 | string | - | -| labelFontSize | 标签字体大小 | number | 12 | -| labelFontWeight | 标签字体粗细 | number \| string | `normal` | -| labelPlacement | 标签相对于节点主图形的位置 | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` \| `center` | `bottom` | -| labelOffsetX | 标签在 x 轴方向上的偏移量 | number | 0 | -| labelOffsetY | 标签在 y 轴方向上的偏移量 | number | 0 | -| labelWordWrap | 是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | -| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过节点宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number \| string | `200%` | -| labelMaxLines | 最大行数 | number | 1 | -| 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 | - | -| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | -| `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| label | 是否显示节点标签 | boolean | true | +| labelText | 标签文字内容 | string | - | +| labelFill | 标签文字颜色 | string | - | +| labelFontSize | 标签字体大小 | number | 12 | +| labelFontWeight | 标签字体粗细 | number | string | `normal` | +| labelPlacement | 标签相对于节点主图形的位置 | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` | +| labelOffsetX | 标签在 x 轴方向上的偏移量 | number | 0 | +| labelOffsetY | 标签在 y 轴方向上的偏移量 | number | 0 | +| labelWordWrap | 是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | +| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过节点宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number | string | `200%` | +| labelMaxLines | 最大行数 | number | 1 | +| 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 | - | +| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number | number[] | string | 0 | +| `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | ### 光晕样式 halo @@ -89,18 +91,18 @@ const graph = new Graph({ ### 图标样式 icon -| 属性 | 描述 | 类型 | 默认值 | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -| icon | 是否显示节点图标 | boolean | true | -| iconSrc | 图片来源。其优先级高于 iconText | string | - | -| iconWidth | 图片宽度 | number | 主图形宽度的一半 | -| iconHeight | 图标高度 | number | 主图形高度的一半 | -| iconRadius | 图标圆角半径 | number | 0 | -| iconText | 图标文字 | string | - | -| iconFill | 图标文字颜色 | string | - | -| iconFontSize | 图标字体大小 | number | 16 | -| iconFontWeight | 图标字体粗细 | number \| string | `normal` | -| `icon${StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 iconFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) \| [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| icon | 是否显示节点图标 | boolean | true | +| iconSrc | 图片来源。其优先级高于 iconText | string | - | +| iconWidth | 图片宽度 | number | 主图形宽度的一半 | +| iconHeight | 图标高度 | number | 主图形高度的一半 | +| iconRadius | 图标圆角半径 | number | 0 | +| iconText | 图标文字 | string | - | +| iconFill | 图标文字颜色 | string | - | +| iconFontSize | 图标字体大小 | number | 16 | +| iconFontWeight | 图标字体粗细 | number | string | `normal` | +| `icon${StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 iconFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | ### 徽标样式 badges @@ -113,21 +115,21 @@ const graph = new Graph({ #### BadgeStyleProps -| 属性 | 描述 | 类型 | 默认值 | -| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| placement | 徽标相对于节点主图形的位置。若不指定，默认从右上角顺时针依次排放 | `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` | - | -| offsetX | 徽标在 x 轴方向上的偏移量 | number | 0 | -| offsetY | 徽标在 y 轴方向上的偏移量 | number | 0 | -| text | 文字内容 | string | - | -| fill | 文字颜色 | string | - | -| fontSize | 字体大小 | number | 8 | -| fontWeight | 字体粗细 | number \| string | `normal` | -| padding | 内边距 | number \| number[] | 0 | -| `${StyleProps}` | 更多文字样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | -| background | 是否显示背景 | boolean | true | -| backgroundFill | 背景填充色。若不指定，优先考虑 badgePalette 按顺序分配 | string | - | -| backgroundRadius | 背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | -| `background${StyleProps}` | 更多背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | +| placement | 徽标相对于节点主图形的位置。若不指定，默认从右上角顺时针依次排放 | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | - | +| offsetX | 徽标在 x 轴方向上的偏移量 | number | 0 | +| offsetY | 徽标在 y 轴方向上的偏移量 | number | 0 | +| text | 文字内容 | string | - | +| fill | 文字颜色 | string | - | +| fontSize | 字体大小 | number | 8 | +| fontWeight | 字体粗细 | number | string | `normal` | +| padding | 内边距 | number | number[] | 0 | +| `${StyleProps}` | 更多文字样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| background | 是否显示背景 | boolean | true | +| backgroundFill | 背景填充色。若不指定，优先考虑 badgePalette 按顺序分配 | string | - | +| backgroundRadius | 背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number | number[] | string | 0 | +| `background${StyleProps}` | 更多背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | 例如，给一个节点添加三个不同含义的徽标： @@ -278,18 +280,85 @@ createGraph( ## 动画属性 animation +定义节点的动画效果，支持下列两种配置方式： + +1. 关闭节点全部动画 + +```json +{ + "node": { + "animation": false + } +} +``` + +2. 配置阶段动画 + +阶段动画是指节点在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括： + +- `enter`: 节点进入画布时的动画 +- `update`: 节点更新时的动画 +- `exit`: 节点离开画布时的动画 +- `show`: 节点从隐藏状态显示时的动画 +- `hide`: 节点隐藏时的动画 +- `collapse`: 节点收起时的动画 +- `expand`: 节点展开时的动画 + +你可以参考 [动画范式](/manual/core-concept/animation#动画范式) 使用动画语法来配置节点，如： + +```json +{ + "node": { + "animation": { + "update": [ + { + "fields": ["x", "y"], // 更新时只对 x 和 y 属性进行动画 + "duration": 1000, // 动画持续时间 + "easing": "linear" // 缓动函数 + } + ], + } +} +``` + +也可以使用内置的动画效果： + +```json +{ + "node": { + "animation": { + "enter": "fade", // 使用渐变动画 + "update": "translate", // 使用平移动画 + "exit": "fade" // 使用渐变动画 + } + } +} +``` + +你可以传入 false 来关闭特定阶段的动画： + +```json +{ + "node": { + "animation": { + "enter": false // 关闭节点入场动画 + } + } +} +``` + ## 色板属性 palette 在定义图元素样式时，色板能够快速指定节点颜色，尤其在聚类时，可以直观地展示节点的类别。 -> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](https://g6.antv.antgroup.com/manual/core-concept/palette)。 +> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](/manual/core-concept/palette)。 -| 属性 | 描述 | 类型 | 默认值 | -| ------ | ------------------------------------------------------------------- | ----------------------------- | ------ | --- | ------- | -| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` \| `value` | `` | `` | `group` | -| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string \| ((datum) => string) | `id` | -| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string \| string[] | - | -| invert | 是否反转色板 | boolean | false | +| 属性 | 描述 | 类型 | 默认值 | +| ------ | ------------------------------------------------------------------- | --------------------------------- | ------- | +| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` | `value` | `group` | +| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string | ((datum) => string) | `id` | +| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string | string[] | - | +| invert | 是否反转色板 | boolean | false | 例如，将一组数据根据 `category` 字段配置节点的颜色，使得同类别的节点颜色相同： From e711bbc25c0b3718db289f627333c5b11390fdd9 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 28 Nov 2024 20:23:47 +0800 Subject: [PATCH 04/14] docs: update grammar --- .../docs/api/elements/nodes/BaseNode.en.md | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md index 354810391ee..f4160c869c5 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.en.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -1,9 +1,9 @@ --- -title: Node Configuration Options +title: Node Options order: 0 --- -This document introduces node property configuration. +This document introduces node properties. | Property | Description | Type | Default Value | | --------- | ------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | @@ -25,9 +25,9 @@ Defines the node's style, including color, size, etc. > For an in-depth understanding of node composition, read [Core Concepts - Element](/en/manual/core-concept/element). -The following style configurations will be explained sequentially based on atomic graphics: +The following style will be explained sequentially based on atomic shapes: -### Main Graphic Style `key` +### Main Shape Style `key` | Property | Description | Type | Default Value | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------- | @@ -39,7 +39,7 @@ The following style configurations will be explained sequentially based on atomi | stroke | Stroke color | string | `#000` | | lineWidth | Stroke width | number | string | 1 | | collapsed | Whether the current node/group is expanded | boolean | false | -| `${StyleProps}` | Additional graphic configuration, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main graphic's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | +| `${StyleProps}` | Additional shape options, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main graphic's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | ### Label Style `label` @@ -57,45 +57,45 @@ The following style configurations will be explained sequentially based on atomi | labelMaxWidth | Maximum label width. When word wrapping is enabled, the label wraps at this width
- `string`: Defines the maximum width as a percentage of the node width, e.g., `50%` means the label width does not exceed half of the node width
- `number`: Defines the maximum width in pixels, e.g., `100` means the maximum label width is 100 pixels | number | string | `200%` | | labelMaxLines | Maximum number of lines | number | 1 | | labelPadding | Padding inside the label | number | number[] | 0 | -| `label${StyleProps}` | Additional label style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text). For instance, `labelFontSize` specifies the label font size | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| `label${StyleProps}` | Additional label style options, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text). For instance, `labelFontSize` specifies the label font size | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | | labelBackground | Whether to display a background | boolean | false | | labelBackgroundFill | Label background fill color | string | - | | labelBackgroundRadius | Label background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets the radius for each corner, completing missing values
- `string`: Similar to the CSS `padding` property, values are separated by spaces | number | number[] | string | 0 | -| `labelBackground${StyleProps}` | Additional label background style configuration, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `labelBackgroundFillOpacity` specifies the transparency of the label background | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | +| `labelBackground${StyleProps}` | Additional label background style options, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `labelBackgroundFillOpacity` specifies the transparency of the label background | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | ### Halo Style `halo` -| Property | Description | Type | Default Value | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------- | -| halo | Whether to display a halo effect around the node | boolean | false | -| haloFill | Halo fill color | string | Same as the fill color of the main graphic | -| haloStroke | Halo stroke color | string | Same as the stroke color of the main graphic | -| haloLineWidth | Halo stroke width | number | 3 | -| `halo${StyleProps}` | Additional halo style configuration, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object). For instance, `haloFillOpacity` specifies the transparency of the halo's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | +| Property | Description | Type | Default Value | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------- | +| halo | Whether to display a halo effect around the node | boolean | false | +| haloFill | Halo fill color | string | Same as the fill color of the main graphic | +| haloStroke | Halo stroke color | string | Same as the stroke color of the main graphic | +| haloLineWidth | Halo stroke width | number | 3 | +| `halo${StyleProps}` | Additional halo style options, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object). For instance, `haloFillOpacity` specifies the transparency of the halo's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | ### Icon Style `icon` -| Property | Description | Type | Default Value | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| icon | Whether to display an icon on the node | boolean | true | -| iconSrc | Image source. Overrides `iconText` | string | - | -| iconWidth | Image width | number | Half of the main graphic's width | -| iconHeight | Icon height | number | Half of the main graphic's height | -| iconRadius | Icon corner radius | number | 0 | -| iconText | Icon text | string | - | -| iconFill | Icon text color | string | - | -| iconFontSize | Icon font size | number | 16 | -| iconFontWeight | Icon font weight | number | string | `normal` | -| `icon${StyleProps}` | Additional icon style configuration, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | +| Property | Description | Type | Default Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| icon | Whether to display an icon on the node | boolean | true | +| iconSrc | Image source. Overrides `iconText` | string | - | +| iconWidth | Image width | number | Half of the main graphic's width | +| iconHeight | Icon height | number | Half of the main graphic's height | +| iconRadius | Icon corner radius | number | 0 | +| iconText | Icon text | string | - | +| iconFill | Icon text color | string | - | +| iconFontSize | Icon font size | number | 16 | +| iconFontWeight | Icon font weight | number | string | `normal` | +| `icon${StyleProps}` | Additional icon style options, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | ### Badge Style `badges` -| Property | Description | Type | Default Value | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | --------------------------------- | -| badge | Whether to display node badges | boolean | true | -| badges | Sets the badges | [BadgeStyleProps](#badgestyleprops)[] | - | -| badgePalette | Background color palette for badges | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] | -| `badge${StyleProps} ` | General badge style configurations applied to each badge individually. Badge-specific styles in `badges` take precedence over this setting | [BadgeStyleProps](#badgestyleprops) | - | +| Property | Description | Type | Default Value | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | --------------------------------- | +| badge | Whether to display node badges | boolean | true | +| badges | Sets the badges | [BadgeStyleProps](#badgestyleprops)[] | - | +| badgePalette | Background color palette for badges | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] | +| `badge${StyleProps} ` | General badge style options applied to each badge individually. Badge-specific styles in `badges` take precedence over this setting | [BadgeStyleProps](#badgestyleprops) | - | #### BadgeStyleProps @@ -109,11 +109,11 @@ The following style configurations will be explained sequentially based on atomi | fontSize | Font size | number | 8 | | fontWeight | Font weight | number | string | `normal` | | padding | Padding inside the badge | number | number[] | 0 | -| `${StyleProps}` | Additional text style configurations. Refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | +| `${StyleProps}` | Additional text style options. Refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | | background | Whether to display a background | boolean | true | | backgroundFill | Background fill color. If unspecified, the colors are assigned sequentially from `badgePalette` | string | - | | backgroundRadius | Background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets individual corner radii, completing any missing values
- `string`: Similar to the CSS `padding` property with space-separated values | number | number[] | string | 0 | -| `background${StyleProps}` | Additional background style configurations. Refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `backgroundFillOpacity` adjusts the transparency of the background color | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | +| `background${StyleProps}` | Additional background style options. Refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `backgroundFillOpacity` adjusts the transparency of the background color | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | Example: Adding three badges with different meanings to a node: @@ -161,7 +161,7 @@ createGraph( | Property | Description | Type | Default Value | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- | ------------- | | port | Whether to display connection ports | boolean | true | -| ports | Connection port configurations, supporting multiple ports | [PortStyleProps](#portstyleprops)[] | - | +| ports | Connection port options, supporting multiple ports | [PortStyleProps](#portstyleprops)[] | - | | `port${StyleProps}` | Additional connection port styles. Refer to [PortStyleProps](#portstyleprops). For example, `portR` specifies the radius of circular ports | [PortStyleProps](#portstyleprops) | - | #### PortStyleProps From 57f954a97ece24d57857c4dae6dfb5663317a4ca Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Thu, 28 Nov 2024 20:24:56 +0800 Subject: [PATCH 05/14] docs: edge configurations --- .../docs/api/elements/edges/BaseEdge.zh.md | 236 ++++++++++++++++++ 1 file changed, 236 insertions(+) create mode 100644 packages/site/docs/api/elements/edges/BaseEdge.zh.md diff --git a/packages/site/docs/api/elements/edges/BaseEdge.zh.md b/packages/site/docs/api/elements/edges/BaseEdge.zh.md new file mode 100644 index 00000000000..0d4cf5647f5 --- /dev/null +++ b/packages/site/docs/api/elements/edges/BaseEdge.zh.md @@ -0,0 +1,236 @@ +--- +title: 边配置项 +order: 0 +--- + +本文介绍边属性配置，配置位置如下： + +```js {5-9} +import { Graph } from '@antv/g6'; + +const graph = new Graph({ + edge: { + type: 'line', + style: {}, + state: {}, + palette: {}, + animation: {}, + }, +}); +``` + +| 属性 | 描述 | 类型 | 默认值 | +| --------- | -------------------------------------- | ---------------------------------------- | ------ | +| type | 边类型，内置边类型名称或自定义边的名称 | string | `line` | +| style | 边样式，包括颜色、大小等 | [Style](#样式属性-style) | - | +| state | 定义边在不同状态下的样式 | Record | - | +| palette | 定义边的色板，用于根据不同数据映射颜色 | [Palette](#色板属性-palette) | - | +| animation | 定义边的动画效果 | [Animation](#动画-animation) | - | + +## 类型属性 type + +指定边类型，内置边类型名称或自定义边的名称。默认为 `line`。更多内置支持边类型，可查看[边注册表](https://g6.antv.antgroup.com/manual/getting-started/extensions#%E8%BE%B9)。 + +## 样式属性 style + +定义边的样式，包括颜色、大小等。 + + + +> 了解边的构成，请阅读 [核心概念 - 元素](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%BE%B9%E6%9E%84%E6%88%90)。 + +以下样式配置将按原子图形依次说明： + +### 主图形样式 key + +| 属性 | 描述 | 类型 | 默认值 | +| --------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------ | +| stroke | 描边色 | string | `#000` | +| lineWidth | 描边宽度 | number | 1 | +| lineDash | 线条虚线的偏移量 | number | 0 | +| sourcePort | 边起始连接的 port | string | - | +| targetPort | 边终点连接的 port | string | - | +| isBillboard | 3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像 | boolean | true | +| `${StyleProps}` | 更多样式配置，请参考 [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) 配置值 | [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) | - | + +### 标签样式 label + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | +| label | 是否显示边标签 | boolean | true | +| labelAutoRotate | 是否自动旋转，保持与边的方向一致 | boolean | true | +| labelText | 标签文字内容 | string | - | +| labelFill | 标签文字颜色 | string | - | +| labelFontSize | 标签字体大小 | number | 12 | +| 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%` | +| labelMaxLines | 最大行数 | number | 1 | +| 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 | - | +| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | +| `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | + +### 光晕样式 halo + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------------------- | +| halo | 是否显示边光晕 | boolean | false | +| haloStroke | 光晕描边色 | string | 与主图形的填充色一致 | +| haloLineWidth | 光晕描边宽度 | number | 3 | +| `halo${StyleProps}` | 更多光晕样式配置，参考 [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) 配置项。例如 haloStrokeOpacity 代表光晕描边透明度 | [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) | - | + +### 徽标样式 badge + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | +| badge | 是否显示边徽标 | boolean | true | +| 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 | +| `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 | +| `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] \| [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] \| [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) | - | + +## 状态样式属性 state + +在一些交互行为中，比如点击选中一个边或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。 + +G6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。 + + + +例如，当边处于 `focus` 状态时，可以为其添加一个宽度为 6 且颜色为黄色的光晕。 + +```json +{ + "edge": { + "state": { + "focus": { + "halo": true, + "haloLineWidth": 6, + "haloStroke": "yellow" + } + } + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: [{ id: 'node1' }, { id: 'node2' }], + edges: [{ source: 'node1', target: 'node2', states: ['focus'] }], + }, + edge: { + state: { + focus: { + halo: true, + haloLineWidth: 6, + haloStroke: 'yellow', + }, + }, + }, + layout: { + type: 'grid', + cols: 2, + }, + }, + { width: 300, height: 100 }, +); +``` + +## 动画属性 animation + +## 色板属性 palette + +在定义图元素样式时，色板能够快速指定边颜色，尤其在聚类时，可以直观地展示边的类别。 + +> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](https://g6.antv.antgroup.com/manual/core-concept/palette)。 + +| 属性 | 描述 | 类型 | 默认值 | +| ------ | ------------------------------------------------------------------- | ----------------------------- | ------- | +| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` \| `value` | `group` | +| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string \| ((datum) => string) | `id` | +| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string \| string[] | - | +| invert | 是否反转色板 | boolean | false | + +例如，将一组数据根据 `category` 字段配置边的颜色，使得同类别的边颜色相同： + +```json +{ + "node": { + "palette": { + "type": "group", + "field": "category", + "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] + } + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(10) + .fill(0) + .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 10 }, + node: { + palette: { + type: 'group', + field: 'category', + color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'], + }, + }, + }, + { width: 600, height: 100 }, +); +``` From 4ead6cf6d87069c2305d3f7bf315d45a36f43454 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 28 Nov 2024 20:37:54 +0800 Subject: [PATCH 06/14] docs: update base node links --- packages/site/docs/api/elements/nodes/BaseNode.en.md | 4 ++-- packages/site/docs/api/elements/nodes/BaseNode.zh.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md index f4160c869c5..fa1d2c31fa1 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.en.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -23,7 +23,7 @@ Defines the node's style, including color, size, etc. -> For an in-depth understanding of node composition, read [Core Concepts - Element](/en/manual/core-concept/element). +> For an in-depth understanding of node composition, read [Core Concepts - Element - Node](/en/manual/core-concept/element#node). The following style will be explained sequentially based on atomic shapes: @@ -60,7 +60,7 @@ The following style will be explained sequentially based on atomic shapes: | `label${StyleProps}` | Additional label style options, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text). For instance, `labelFontSize` specifies the label font size | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | | labelBackground | Whether to display a background | boolean | false | | labelBackgroundFill | Label background fill color | string | - | -| labelBackgroundRadius | Label background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets the radius for each corner, completing missing values
- `string`: Similar to the CSS `padding` property, values are separated by spaces | number | number[] | string | 0 | +| labelBackgroundRadius | Label background corner radius
- `number`: Sets the same radius for all four corners
- `number[]`: Sets the radius for each corner | number | number[] | 0 | | `labelBackground${StyleProps}` | Additional label background style options, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect). For instance, `labelBackgroundFillOpacity` specifies the transparency of the label background | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | ### Halo Style `halo` diff --git a/packages/site/docs/api/elements/nodes/BaseNode.zh.md b/packages/site/docs/api/elements/nodes/BaseNode.zh.md index c97f96b5559..120ab4f3578 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.zh.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.zh.md @@ -39,7 +39,7 @@ const graph = new Graph({ -> 深入了解节点构成，请阅读 [核心概念 - 元素](/manual/core-concept/element)。 +> 深入了解节点构成，请阅读 [核心概念 - 元素 - 节点](/manual/core-concept/element#节点)。 以下样式配置将按原子图形依次说明： @@ -76,7 +76,7 @@ const graph = new Graph({ | `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 | - | -| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number | number[] | string | 0 | +| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number | number[] | 0 | | `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | ### 光晕样式 halo From afc8c143560704260d8f15ad94532bd7e6bb42fc Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 28 Nov 2024 20:39:46 +0800 Subject: [PATCH 07/14] docs: update base edge doc --- .../docs/api/elements/edges/BaseEdge.zh.md | 84 +++++++++++++++++-- 1 file changed, 76 insertions(+), 8 deletions(-) diff --git a/packages/site/docs/api/elements/edges/BaseEdge.zh.md b/packages/site/docs/api/elements/edges/BaseEdge.zh.md index 0d4cf5647f5..737d5d61f1a 100644 --- a/packages/site/docs/api/elements/edges/BaseEdge.zh.md +++ b/packages/site/docs/api/elements/edges/BaseEdge.zh.md @@ -29,7 +29,9 @@ const graph = new Graph({ ## 类型属性 type -指定边类型，内置边类型名称或自定义边的名称。默认为 `line`。更多内置支持边类型，可查看[边注册表](https://g6.antv.antgroup.com/manual/getting-started/extensions#%E8%BE%B9)。 +指定边类型，内置边类型名称或自定义边的名称。默认为 `line`（直线边）。 + +更多内置支持边类型，可查看[边注册表](/manual/getting-started/extensions#边)。 ## 样式属性 style @@ -37,7 +39,7 @@ const graph = new Graph({ -> 了解边的构成，请阅读 [核心概念 - 元素](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%BE%B9%E6%9E%84%E6%88%90)。 +> 了解边的构成，请阅读 [核心概念 - 元素 - 边](/manual/core-concept/element#边)。 以下样式配置将按原子图形依次说明： @@ -48,8 +50,8 @@ const graph = new Graph({ | stroke | 描边色 | string | `#000` | | lineWidth | 描边宽度 | number | 1 | | lineDash | 线条虚线的偏移量 | number | 0 | -| sourcePort | 边起始连接的 port | string | - | -| targetPort | 边终点连接的 port | string | - | +| sourcePort | 边起始连接的连接桩 | string | - | +| targetPort | 边终点连接的连接桩 | string | - | | isBillboard | 3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像 | boolean | true | | `${StyleProps}` | 更多样式配置，请参考 [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) 配置值 | [PathStyleProps](https://g.antv.antgroup.com/api/basic/path) | - | @@ -73,7 +75,7 @@ const graph = new Graph({ | `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 | - | -| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \| number[] \| string | 0 | +| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number | number[] | 0 | | `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | ### 光晕样式 halo @@ -110,7 +112,7 @@ const graph = new Graph({ | ---------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | startArrow | 是否显示边的起始箭头 | boolean | false | | startArrowOffset | 起始箭头的偏移量 | number | 0 | -| startArrowSize | 箭头大小 | number \| [number, number] \| [number, number, number] | 8 | +| startArrowSize | 箭头大小 | number \| [number, number] | 8 | | startArrowType | 箭头类型 | `triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple` \| ((width: number, height: number) => PathArray) | `triangle` | ### 终点箭头样式 endArrow @@ -119,7 +121,7 @@ const graph = new Graph({ | -------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | endArrow | 是否显示边的结束箭头 | boolean | false | | endArrowOffset | 结束箭头的偏移量 | number | 0 | -| endArrowSize | 箭头大小 | number \| [number, number] \| [number, number, number] | 8 | +| endArrowSize | 箭头大小 | number \| [number, number] | 8 | | endArrowType | 箭头类型 | `triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple` \| ((width: number, height: number) => PathArray) | `triangle` | ### 自环边样式 loop @@ -185,11 +187,77 @@ createGraph( ## 动画属性 animation +定义边的动画效果，支持下列两种配置方式： + +1. 关闭边全部动画 + +```json +{ + "edge": { + "animation": false + } +} +``` + +2. 配置阶段动画 + +阶段动画是指边在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括： + +- `enter`: 边进入画布时的动画 +- `update`: 边更新时的动画 +- `exit`: 边离开画布时的动画 +- `show`: 边从隐藏状态显示时的动画 +- `hide`: 边隐藏时的动画 +- `collapse`: 边收起时的动画 +- `expand`: 边展开时的动画 + +你可以参考 [动画范式](/manual/core-concept/animation#动画范式) 使用动画语法来配置边，如： + +```json +{ + "node": { + "animation": { + "update": [ + { + "fields": ["stroke"], // 更新时只对 stroke 属性进行动画 + "duration": 1000, // 动画持续时间 + "easing": "linear" // 缓动函数 + } + ], + } +} +``` + +也可以使用内置的动画效果： + +```json +{ + "node": { + "animation": { + "enter": "fade", // 使用渐变动画 + "exit": "fade" // 使用渐变动画 + } + } +} +``` + +你可以传入 false 来关闭特定阶段的动画： + +```json +{ + "node": { + "animation": { + "enter": false // 关闭边入场动画 + } + } +} +``` + ## 色板属性 palette 在定义图元素样式时，色板能够快速指定边颜色，尤其在聚类时，可以直观地展示边的类别。 -> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](https://g6.antv.antgroup.com/manual/core-concept/palette)。 +> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](manual/core-concept/palette)。 | 属性 | 描述 | 类型 | 默认值 | | ------ | ------------------------------------------------------------------- | ----------------------------- | ------- | From 709a4832000f463b0e13842c3b58b3d6fb8d4e27 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 28 Nov 2024 20:56:40 +0800 Subject: [PATCH 08/14] refactor: complete graph options comment --- packages/g6/src/spec/canvas.ts | 28 ++++++++++++- packages/g6/src/spec/graph.ts | 72 ++++++++++++++++++++++++++------ packages/g6/src/spec/viewport.ts | 4 ++ 3 files changed, 90 insertions(+), 14 deletions(-) diff --git a/packages/g6/src/spec/canvas.ts b/packages/g6/src/spec/canvas.ts index 95c8e154c17..b31754c1aca 100644 --- a/packages/g6/src/spec/canvas.ts +++ b/packages/g6/src/spec/canvas.ts @@ -18,18 +18,30 @@ export interface CanvasOptions { * 画布宽度 * * canvas width + * @remarks + * 如果未设置，则会自动获取容器宽度 + * + * If not set, the container width will be automatically obtained */ width?: number; /** * 画布高度 * * canvas height + * @remarks + * 如果未设置，则会自动获取容器高度 + * + * If not set, the container height will be automatically obtained */ height?: number; /** - * 获取渲染器 + * 手动置顶渲染器 + * + * manually set renderer + * @remarks + * G6 采用了分层渲染的方式，分为 background、main、label、transient 四层，用户可以通过该配置项分别设置每层画布的渲染器 * - * get renderer + * G6 adopts a layered rendering method, divided into four layers: background, main, label, transient. Users can set the renderer of each layer canvas separately through this configuration item */ renderer?: (layer: 'background' | 'main' | 'label' | 'transient') => IRenderer; /** @@ -37,18 +49,30 @@ export interface CanvasOptions { * * whether to auto resize canvas * @defaultValue false + * @remarks + * 基于 window.onresize 事件自动调整画布大小 + * + * Automatically adjust the canvas size based on the window.onresize event */ autoResize?: boolean; /** * 画布背景色 * * canvas background color + * @remarks + * 该颜色作为导出图片时的背景色 + * + * This color is used as the background color when exporting images */ background?: string; /** * 设备像素比 * * device pixel ratio + * @remarks + * 用于高清屏的设备像素比，默认为 [window.devicePixelRatio](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio) + * + * Device pixel ratio for high-definition screens, default is [window.devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) */ devicePixelRatio?: number; /** diff --git a/packages/g6/src/spec/graph.ts b/packages/g6/src/spec/graph.ts index 35e84c5c90a..b4b60544b82 100644 --- a/packages/g6/src/spec/graph.ts +++ b/packages/g6/src/spec/graph.ts @@ -40,30 +40,50 @@ export interface GraphOptions extends CanvasOptions, ViewportOptions { * 数据 * * Data + * @remarks + * 详见 [Data](/api/data/graph-data) + * + * See [Data](/en/api/data/graph-data) */ data?: GraphData; /** - * 布局 + * 布局配置项 + * + * Layout options + * @remarks + * 详见 [Layout](/api/layouts/antv-dagre-layout) * - * Layout + * See [Layout](/en/api/layouts/antv-dagre-layout) */ layout?: LayoutOptions; /** - * 节点 + * 节点配置项 + * + * Node options + * @remarks + * 详见 [Node](/api/elements/nodes/base-node) * - * Node + * See [Node](/en/api/elements/nodes/base-node) */ node?: NodeOptions; /** - * 边 + * 边配置项 * - * Edge + * Edge options + * @remarks + * 详见 [Edge](/api/elements/edges/base-edge) + * + * See [Edge](/en/api/elements/edges/base-edge) */ edge?: EdgeOptions; /** - * Combo + * 组合配置项 * - * Combo + * Combo options + * @remarks + * 详见 [Combo](/api/elements/combos/base-combo) + * + * See [Combo](/en/api/elements/combos/base-combo) */ combo?: ComboOptions; /** @@ -73,15 +93,43 @@ export interface GraphOptions extends CanvasOptions, ViewportOptions { */ theme?: ThemeOptions; /** - * 交互 + * 启用交互 + * + * Enable interactions + * @remarks + * + * - 概念：[核心概念 - 交互](/manual/core-concept/behavior) + * + * - 内置交互: [交互](/api/behaviors/auto-adapt-label) + * + * - 自定义交互: [自定义扩展 - 自定义交互](/manual/advanced/custom-behavior) * - * Behaviors + * + * - Concept: [Concepts - Behavior](/en/manual/core-concept/behavior) + * + * - Built-in behaviors: [Behavior](/en/api/behaviors/auto-adapt-label) + * + * - Custom behaviors: [Custom Extension - Custom Behavior](/en/manual/advanced/custom-behavior) */ behaviors?: BehaviorOptions; /** - * 画布插件 + * 启用插件 + * + * Enable plugins + * @remarks + * + * - 概念：[核心概念 - 插件](/manual/core-concept/plugin) + * + * - 内置插件: [插件](/en/api/plugins/background) + * + * - 自定义插件: [自定义扩展 - 自定义插件](/manual/advanced/custom-plugin) + * + * + * - Concept: [Concepts - Plugin](/en/manual/core-concept/plugin) + * + * - Built-in plugins: [Plugin](/en/api/plugins/background) * - * Canvas plugins + * - Custom plugins: [Custom Extension - Custom Plugin](/en/manual/advanced/custom-plugin) */ plugins?: PluginOptions; /** diff --git a/packages/g6/src/spec/viewport.ts b/packages/g6/src/spec/viewport.ts index 728b134ef75..784d289434b 100644 --- a/packages/g6/src/spec/viewport.ts +++ b/packages/g6/src/spec/viewport.ts @@ -24,6 +24,10 @@ export interface ViewportOptions { * 是否自动适应 * * whether to auto fit + * @remarks + * 每次执行 `render` 时，都会根据 `autoFit` 进行自适应 + * + * Every time `render` is executed, it will be adapted according to `autoFit` */ autoFit?: | { type: 'view'; options?: FitViewOptions; animation?: ViewportAnimationEffectTiming } From 44fded7b77e9eafd75f38fcd762e63b082350617 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Fri, 29 Nov 2024 11:36:03 +0800 Subject: [PATCH 09/14] docs: add chinese combo options docs --- .../docs/api/elements/combos/BaseCombo.en.md | 143 ++++++++++ .../docs/api/elements/combos/BaseCombo.zh.md | 248 ++++++++++++++++++ .../docs/api/elements/edges/BaseEdge.zh.md | 95 +++++-- .../docs/api/elements/nodes/BaseNode.en.md | 93 +++++-- .../docs/api/elements/nodes/BaseNode.zh.md | 83 ++++-- 5 files changed, 590 insertions(+), 72 deletions(-) create mode 100644 packages/site/docs/api/elements/combos/BaseCombo.en.md create mode 100644 packages/site/docs/api/elements/combos/BaseCombo.zh.md diff --git a/packages/site/docs/api/elements/combos/BaseCombo.en.md b/packages/site/docs/api/elements/combos/BaseCombo.en.md new file mode 100644 index 00000000000..3acec5ff63a --- /dev/null +++ b/packages/site/docs/api/elements/combos/BaseCombo.en.md @@ -0,0 +1,143 @@ +--- +title: BaseCombo +--- + + + +### childrenData + +> _NodeData \| ComboData__[]_ + +The data of the children of combo + + If the combo is collapsed, children may be empty, and the complete child element data can be obtained through childrenData + +### childrenNode + +> _string__[]_ + +The children of combo, which can be nodes or combos + +### collapsedMarker + +> _boolean_ + +Whether to show the marker when the combo is collapsed + +### collapsedSize + +> _number \| [number, number] \| Float32Array \| [number, number, number]_ + +The default size of combo when collapsed + +### padding + +> _number \| number[]_ + +The padding of combo, only effective when expanded + +### size + +> _number \| [number, number] \| Float32Array \| [number, number, number]_ + +The default size of combo when expanded + +## Collapsed Style + +### collapsed{[BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#%E7%BB%98%E5%9B%BE%E5%B1%9E%E6%80%A7)} + +
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. + +TextStyleProps includes the following properties: + +- fill +- fontSize +- fontWeight +- ... + +icon{TextStyleProps} means you need to use the following property names: + +- iconFill +- iconFontSize +- iconFontWeight +- ... + +
+ +## Collapsed Marker Style + +### collapsedMarker{[BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#%E7%BB%98%E5%9B%BE%E5%B1%9E%E6%80%A7)} + +
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. + +TextStyleProps includes the following properties: + +- fill +- fontSize +- fontWeight +- ... + +icon{TextStyleProps} means you need to use the following property names: + +- iconFill +- iconFontSize +- iconFontWeight +- ... + +
+ +### collapsedMarker{[TextStyleProps](https://g.antv.antgroup.com/api/basic/text)} + +
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. + +TextStyleProps includes the following properties: + +- fill +- fontSize +- fontWeight +- ... + +icon{TextStyleProps} means you need to use the following property names: + +- iconFill +- iconFontSize +- iconFontWeight +- ... + +
+ +### collapsedMarker{[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image)} + +> Excludes z + +
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. + +TextStyleProps includes the following properties: + +- fill +- fontSize +- fontWeight +- ... + +icon{TextStyleProps} means you need to use the following property names: + +- iconFill +- iconFontSize +- iconFontWeight +- ... + +
+ +### collapsedMarkerType + +> _'child-count' \| 'descendant-count' \| 'node-count' \| ((children:_ _NodeData \| ComboData__[]) => string)_ + +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 diff --git a/packages/site/docs/api/elements/combos/BaseCombo.zh.md b/packages/site/docs/api/elements/combos/BaseCombo.zh.md new file mode 100644 index 00000000000..7d1e748ff6c --- /dev/null +++ b/packages/site/docs/api/elements/combos/BaseCombo.zh.md @@ -0,0 +1,248 @@ +--- +title: 组合配置项 +--- + +本文介绍组合属性配置，配置位置如下： + +```js {5-9} +import { Graph } from '@antv/g6'; + +const graph = new Graph({ + combo: { + type: 'circle', + style: {}, + state: {}, + palette: {}, + animation: {}, + }, +}); +``` + +| 属性 | 描述 | 类型 | 默认值 | +| --------- | -------------------------------------------- | ---------------------------------------- | -------- | +| type | 组合类型，内置组合类型名称或自定义组合的名称 | string | `circle` | +| style | 组合样式，包括颜色、大小等 | [Style](#样式属性-style) | - | +| state | 定义组合在不同状态下的样式 | Record | - | +| palette | 定义组合的色板，用于根据不同数据映射颜色 | [Palette](#色板属性-palette) | - | +| animation | 定义组合的动画效果 | [Animation]() | - | + +## 类型属性 type + +指定组合类型，内置组合类型名称或自定义组合的名称。默认为 `circle`（圆形组合）。 + +更多内置支持组合类型，可查看[组合注册表](/manual/getting-started/extensions#组合)。 + +## 样式属性 style + +在此处定义组合的样式，包括颜色、大小等。 + + + +> 了解组合构成，请阅读 [核心概念 - 元素 - 组合](/manual/core-concept/element#组合)。 + +以下样式配置将按原子图形依次说明： + +### 展开时样式 key + +| 属性 | 描述 | 类型 | 默认值 | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------ | +| x | x 坐标 | number | 0 | +| y | y 坐标 | number | 0 | +| z | z 坐标 | number | 0 | +| padding | 组合的内边距，只在展开状态下生效。展开时 Combo 的大小由自子元素集合的的包围盒以及 padding 共同决定 | _number \| number[]_ | 0 | +| fill | 填充色 | string | `#fff` | +| stroke | 描边色 | string | `#000` | +| lineWidth | 描边宽度 | number | 1 | +| `${StyleProps}` | 更多图形配置，参考 [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - | + +### 收起时样式 collapsed + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------ | +| collapsed | 当前组合是否展开 | boolean | false | +| collapsedSize | 组合收起后的默认大小 | _number \| [number, number] \| [number, number, number]_ | 32 | +| collapseFill | 填充色 | string | `#fff` | +| collapsedStroke | 描边色 | string | `#000` | +| collapsedLineWidth | 描边宽度 | number | 1 | +| `collapsed${StyleProps}` | 更多图形配置，参考 [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - | + +### 收起时标记样式 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) | - | + +### 标签样式 label + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| label | 是否显示组合标签 | boolean | true | +| labelText | 标签文字内容 | string | - | +| labelFill | 标签文字颜色 | string | - | +| labelFontSize | 标签字体大小 | number | 12 | +| labelFontWeight | 标签字体粗细 | number | string | `normal` | +| labelPlacement | 标签相对于组合主图形的位置 | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` | +| labelOffsetX | 标签在 x 轴方向上的偏移量 | number | 0 | +| labelOffsetY | 标签在 y 轴方向上的偏移量 | number | 0 | +| labelWordWrap | 是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | +| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于组合宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过组合宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number | string | `200%` | +| labelMaxLines | 最大行数 | number | 1 | +| 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 | - | +| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number | number[] | 0 | +| `labelBackground${StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - | + +### 光晕样式 halo + +| 属性 | 描述 | 类型 | 默认值 | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------- | +| halo | 是否显示组合光晕 | boolean | false | +| haloFill | 光晕填充色 | string | 与主图形的填充色一致 | +| haloStroke | 光晕描边色 | string | 与主图形的填充色一致 | +| haloLineWidth | 光晕描边宽度 | number | 3 | +| `halo${StyleProps}` | 更多光晕样式配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 haloFillOpacity 代表光晕填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | + +## 状态样式属性 state + +在一些交互行为中，比如点击选中一个节点或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。 + +G6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。 + + + +例如，当组合处于 `focus` 状态时，可以为其添加一个宽度为 3 且颜色为橙色的描边。 + +```json +{ + "combo": { + "state": { + "focus": { + "lineWidth": 3, + "stroke": "orange", + "fill": "orange", + "fillOpacity": 0.2 + } + } + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', combo: 'combo1' }], + combos: [{ id: 'combo1', states: ['focus'] }], + }, + combo: { + state: { + focus: { + lineWidth: 3, + stroke: 'orange', + fill: 'orange', + fillOpacity: 0.2, + }, + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +## 动画属性 animation + +## 色板属性 palette + +定义组合的色板，即预定义组合颜色池，并根据规则进行分配，将颜色映射到 `fill` 属性。 + +> 有关色板的定义，请参考 [核心概念 - 色板](/manual/core-concept/palette)。 + +| 属性 | 描述 | 类型 | 默认值 | +| ------ | ------------------------------------------------------------------- | --------------------------------- | ------- | +| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` | `value` | `group` | +| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string | ((datum) => string) | `id` | +| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string | string[] | - | +| invert | 是否反转色板 | boolean | false | + +如将一组数据按 `category` 字段分配节点颜色，使得同类别的节点颜色相同： + +```json +{ + "combo": { + "palette": { + "type": "group", + "field": "category", + "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] + } + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + combos: new Array(8) + .fill(0) + .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 8 }, + combo: { + style: { fillOpacity: 0.4 }, + palette: { + type: 'group', + field: 'category', + color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'], + }, + }, + }, + { width: 600, height: 100 }, +); +``` + +也可以使用默认配置： + +```json +{ + "combo": { + "palette": "tableau" // tableau 为色板名，默认根据 ID 分配颜色 + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + combos: new Array(8) + .fill(0) + .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 8 }, + combo: { + style: { fillOpacity: 0.4 }, + palette: 'tableau', + }, + }, + { width: 600, height: 100 }, +); +``` diff --git a/packages/site/docs/api/elements/edges/BaseEdge.zh.md b/packages/site/docs/api/elements/edges/BaseEdge.zh.md index 737d5d61f1a..4f5e055a5bd 100644 --- a/packages/site/docs/api/elements/edges/BaseEdge.zh.md +++ b/packages/site/docs/api/elements/edges/BaseEdge.zh.md @@ -25,7 +25,7 @@ const graph = new Graph({ | style | 边样式，包括颜色、大小等 | [Style](#样式属性-style) | - | | state | 定义边在不同状态下的样式 | Record | - | | palette | 定义边的色板，用于根据不同数据映射颜色 | [Palette](#色板属性-palette) | - | -| animation | 定义边的动画效果 | [Animation](#动画-animation) | - | +| animation | 定义边的动画效果 | [Animation](#动画属性-animation) | - | ## 类型属性 type @@ -255,26 +255,26 @@ createGraph( ## 色板属性 palette -在定义图元素样式时，色板能够快速指定边颜色，尤其在聚类时，可以直观地展示边的类别。 +定义边的色板，即预定义颜色池，并根据规则进行分配，将颜色映射到 `stroke` 属性。 -> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](manual/core-concept/palette)。 +> 有关色板的定义，请参考 [核心概念 - 色板](/manual/core-concept/palette)。 -| 属性 | 描述 | 类型 | 默认值 | -| ------ | ------------------------------------------------------------------- | ----------------------------- | ------- | -| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` \| `value` | `group` | -| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string \| ((datum) => string) | `id` | -| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string \| string[] | - | -| invert | 是否反转色板 | boolean | false | +| 属性 | 描述 | 类型 | 默认值 | +| ------ | ------------------------------------------------------------------- | --------------------------------- | ------- | +| type | 指定当前色板类型。
- `group`: 离散色板
- `value`: 连续色板 | `group` | `value` | `group` | +| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string | ((datum) => string) | `id` | +| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string | string[] | - | +| invert | 是否反转色板 | boolean | false | -例如，将一组数据根据 `category` 字段配置边的颜色，使得同类别的边颜色相同： +如将一组数据按 `direction` 字段分配节点颜色，使得同类别的节点颜色相同： ```json { - "node": { + "edge": { "palette": { "type": "group", - "field": "category", - "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] + "field": "direction", + "color": ["#F08F56", "#00C9C9"] } } } @@ -286,19 +286,72 @@ createGraph( createGraph( { data: { - nodes: new Array(10) - .fill(0) - .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })), + edges: [ + { source: 'node-1', target: 'node-2', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-3', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-4', data: { direction: 'out' } }, + { source: 'node-5', target: 'node-1', data: { direction: 'in' } }, + { source: 'node-6', target: 'node-1', data: { direction: 'in' } }, + ], + }, + layout: { + type: 'radial', + unitRadius: 120, + linkDistance: 120, }, - layout: { type: 'grid', cols: 10 }, - node: { + edge: { + style: { + endArrow: true, + }, palette: { type: 'group', - field: 'category', - color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'], + field: 'direction', + color: ['#F08F56', '#00C9C9'], + }, + }, + }, + { width: 600, height: 300 }, +); +``` + +也可以使用默认配置： + +```json +{ + "edge": { + "palette": "tableau" // tableau 为色板名，默认根据 ID 分配颜色 + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })), + edges: [ + { source: 'node-1', target: 'node-2', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-3', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-4', data: { direction: 'out' } }, + { source: 'node-5', target: 'node-1', data: { direction: 'in' } }, + { source: 'node-6', target: 'node-1', data: { direction: 'in' } }, + ], + }, + layout: { + type: 'radial', + unitRadius: 120, + linkDistance: 120, + }, + edge: { + style: { + endArrow: true, }, + palette: 'tableau', }, }, - { width: 600, height: 100 }, + { width: 600, height: 300 }, ); ``` diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md index fa1d2c31fa1..42d8580d9da 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.en.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -119,14 +119,18 @@ Example: Adding three badges with different meanings to a node: ```json { - "badge": true, - "badges": [ - { "text": "A", "placement": "right-top" }, - { "text": "Important", "placement": "right" }, - { "text": "Notice", "placement": "right-bottom" } - ], - "badgePalette": ["#7E92B5", "#F4664A", "#FFBE3A"], - "badgeFontSize": 7 + "node": { + "style": { + "badge": true, + "badges": [ + { "text": "A", "placement": "right-top" }, + { "text": "Important", "placement": "right" }, + { "text": "Notice", "placement": "right-bottom" } + ], + "badgePalette": ["#7E92B5", "#F4664A", "#FFBE3A"], + "badgeFontSize": 7 + } + } } ``` @@ -176,16 +180,20 @@ Example: Adding four connection ports to a node: ```json { - "port": true, - "ports": [ - { "key": "top", "placement": "top", "fill": "#7E92B5" }, - { "key": "right", "placement": "right", "fill": "#F4664A" }, - { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" }, - { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" } - ], - "portR": 3, - "portLineWidth": 1, - "portStroke": "#fff" + "node": { + "style": { + "port": true, + "ports": [ + { "key": "top", "placement": "top", "fill": "#7E92B5" }, + { "key": "right", "placement": "right", "fill": "#F4664A" }, + { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" }, + { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" } + ], + "portR": 3, + "portLineWidth": 1, + "portStroke": "#fff" + } + } } ``` @@ -334,18 +342,18 @@ You can pass in false to turn off animation for a particular stage: ## Palette Properties `palette` -When defining graphical element styles, palettes enable quick assignment of colors, particularly useful for clustering, where the node's category can be visually distinguished. +This defines the node's palette, a predefined set of node colors that are allocated according to specific rules, with the colors mapped to the `fill` property. -> If you are unfamiliar with palettes in G6, refer to the relevant [documentation](/en/manual/core-concept/palette). +> For the definition of a palette, please refer to [Core Concepts - Palette](/en/manual/core-concept/palette). -| Property | Description | Type | Default Value | -| -------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- | -| type | Specifies the current palette type.
- `group`: Discrete palette
- `value`: Continuous palette | `group` | `value` | `group` | -| field | Specifies the grouping field in the element data. If not specified, the default is the `id` field | string | ((datum) => string) | `id` | -| color | Palette colors. If the palette is registered, its registered name can be used. Alternatively, an array of colors can be provided | string | string[] | - | -| invert | Whether to invert the palette | boolean | false | +| Property | Description | Type | Default Value | +| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- | +| type | Specifies the type of the current palette.
- `group`: Discrete palette
- `value`: Continuous palette | `group` | `value` | `group` | +| field | Specifies the grouping attribute in the node's data. If not specified, the default grouping attribute is `id`. | string | ((datum) => string) | `id` | +| color | The palette colors. If the palette has been previously registered, its name can be specified directly, or an array of color values can be provided. | string | string[] | - | +| invert | Whether to invert the color palette. | boolean | false | -Example: Configuring node colors by grouping data using the `category` field so that nodes in the same category share the same color: +For example, when assigning node colors based on the `category` attribute, ensuring nodes in the same category share the same color: ```json { @@ -359,7 +367,7 @@ Example: Configuring node colors by grouping data using the `category` field so } ``` -The resulting effect is as follows: +The result is displayed in the following figure: ```js | ob { pin: false } createGraph( @@ -381,3 +389,32 @@ createGraph( { width: 600, height: 100 }, ); ``` + +Alternatively, the default configuration can also be used: + +```json +{ + "node": { + "palette": "tableau" // 'tableau' is the name of the palette, and colors are allocated based on the ID by default. + } +} +``` + +The result is displayed in the following figure: + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(10) + .fill(0) + .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 10 }, + node: { + palette: 'tableau', + }, + }, + { width: 600, height: 100 }, +); +``` diff --git a/packages/site/docs/api/elements/nodes/BaseNode.zh.md b/packages/site/docs/api/elements/nodes/BaseNode.zh.md index 120ab4f3578..348dbf50c82 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.zh.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.zh.md @@ -29,7 +29,7 @@ const graph = new Graph({ ## 类型 type -指定节点类型，内置节点类型名称或自定义节点的名称。默认为 `circle`。 +指定节点类型，内置节点类型名称或自定义节点的名称。默认为 `circle`(圆形)。 更多内置支持节点类型，可查看[节点注册表](/manual/getting-started/extensions#节点)。 @@ -39,7 +39,7 @@ const graph = new Graph({ -> 深入了解节点构成，请阅读 [核心概念 - 元素 - 节点](/manual/core-concept/element#节点)。 +> 了解节点构成，请阅读 [核心概念 - 元素 - 节点](/manual/core-concept/element#节点)。 以下样式配置将按原子图形依次说明： @@ -135,14 +135,18 @@ const graph = new Graph({ ```json { - "badge": true, - "badges": [ - { "text": "A", "placement": "right-top" }, - { "text": "Important", "placement": "right" }, - { "text": "Notice", "placement": "right-bottom" } - ], - "badgePalette": ["#7E92B5", "#F4664A", "#FFBE3A"], - "badgeFontSize": 7 + "node": { + "style": { + "badge": true, + "badges": [ + { "text": "A", "placement": "right-top" }, + { "text": "Important", "placement": "right" }, + { "text": "Notice", "placement": "right-bottom" } + ], + "badgePalette": ["#7E92B5", "#F4664A", "#FFBE3A"], + "badgeFontSize": 7 + } + } } ``` @@ -192,16 +196,20 @@ createGraph( ```json { - "port": true, - "ports": [ - { "key": "top", "placement": "top", "fill": "#7E92B5" }, - { "key": "right", "placement": "right", "fill": "#F4664A" }, - { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" }, - { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" } - ], - "portR": 3, - "portLineWidth": 1, - "portStroke": "#fff" + "node": { + "style": { + "port": true, + "ports": [ + { "key": "top", "placement": "top", "fill": "#7E92B5" }, + { "key": "right", "placement": "right", "fill": "#F4664A" }, + { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" }, + { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" } + ], + "portR": 3, + "portLineWidth": 1, + "portStroke": "#fff" + } + } } ``` @@ -349,9 +357,9 @@ createGraph( ## 色板属性 palette -在定义图元素样式时，色板能够快速指定节点颜色，尤其在聚类时，可以直观地展示节点的类别。 +定义节点的色板，即预定义节点颜色池，并根据规则进行分配，将颜色映射到 `fill` 属性。 -> 如果你对 G6 中的色板还不了解，建议先查阅相关[文档](/manual/core-concept/palette)。 +> 有关色板的定义，请参考 [核心概念 - 色板](/manual/core-concept/palette)。 | 属性 | 描述 | 类型 | 默认值 | | ------ | ------------------------------------------------------------------- | --------------------------------- | ------- | @@ -360,7 +368,7 @@ createGraph( | color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string | string[] | - | | invert | 是否反转色板 | boolean | false | -例如，将一组数据根据 `category` 字段配置节点的颜色，使得同类别的节点颜色相同： +如将一组数据按 `category` 字段分配节点颜色，使得同类别的节点颜色相同： ```json { @@ -396,3 +404,32 @@ createGraph( { width: 600, height: 100 }, ); ``` + +也可以使用默认配置： + +```json +{ + "node": { + "palette": "tableau" // tableau 为色板名，默认根据 ID 分配颜色 + } +} +``` + +效果如下图所示： + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(10) + .fill(0) + .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 10 }, + node: { + palette: 'tableau', + }, + }, + { width: 600, height: 100 }, +); +``` From ccaeaec405e85e7ed86d091a9e213cf537c99c7c Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Fri, 29 Nov 2024 14:05:36 +0800 Subject: [PATCH 10/14] docs: element options docs --- .../docs/api/elements/combos/BaseCombo.en.md | 373 +++++++++++------- .../docs/api/elements/edges/BaseEdge.en.md | 297 ++++++++++++++ .../docs/api/elements/nodes/BaseNode.en.md | 2 +- .../docs/api/elements/nodes/BaseNode.zh.md | 2 +- 4 files changed, 532 insertions(+), 142 deletions(-) create mode 100644 packages/site/docs/api/elements/edges/BaseEdge.en.md diff --git a/packages/site/docs/api/elements/combos/BaseCombo.en.md b/packages/site/docs/api/elements/combos/BaseCombo.en.md index 3acec5ff63a..fedbbcbeb22 100644 --- a/packages/site/docs/api/elements/combos/BaseCombo.en.md +++ b/packages/site/docs/api/elements/combos/BaseCombo.en.md @@ -1,143 +1,236 @@ --- -title: BaseCombo +title: Combo Options +order: 0 --- - - -### childrenData - -> _NodeData \| ComboData__[]_ - -The data of the children of combo - - If the combo is collapsed, children may be empty, and the complete child element data can be obtained through childrenData - -### childrenNode - -> _string__[]_ - -The children of combo, which can be nodes or combos - -### collapsedMarker - -> _boolean_ - -Whether to show the marker when the combo is collapsed - -### collapsedSize - -> _number \| [number, number] \| Float32Array \| [number, number, number]_ - -The default size of combo when collapsed - -### padding - -> _number \| number[]_ - -The padding of combo, only effective when expanded - -### size - -> _number \| [number, number] \| Float32Array \| [number, number, number]_ - -The default size of combo when expanded - -## Collapsed Style - -### collapsed{[BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#%E7%BB%98%E5%9B%BE%E5%B1%9E%E6%80%A7)} - -
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. - -TextStyleProps includes the following properties: - -- fill -- fontSize -- fontWeight -- ... - -icon{TextStyleProps} means you need to use the following property names: - -- iconFill -- iconFontSize -- iconFontWeight -- ... - -
- -## Collapsed Marker Style - -### collapsedMarker{[BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#%E7%BB%98%E5%9B%BE%E5%B1%9E%E6%80%A7)} - -
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. - -TextStyleProps includes the following properties: - -- fill -- fontSize -- fontWeight -- ... - -icon{TextStyleProps} means you need to use the following property names: - -- iconFill -- iconFontSize -- iconFontWeight -- ... - -
- -### collapsedMarker{[TextStyleProps](https://g.antv.antgroup.com/api/basic/text)} - -
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. - -TextStyleProps includes the following properties: - -- fill -- fontSize -- fontWeight -- ... - -icon{TextStyleProps} means you need to use the following property names: - -- iconFill -- iconFontSize -- iconFontWeight -- ... - -
- -### collapsedMarker{[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image)} - -> Excludes z - -
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format. - -TextStyleProps includes the following properties: - -- fill -- fontSize -- fontWeight -- ... - -icon{TextStyleProps} means you need to use the following property names: - -- iconFill -- iconFontSize -- iconFontWeight -- ... - -
- -### collapsedMarkerType - -> _'child-count' \| 'descendant-count' \| 'node-count' \| ((children:_ _NodeData \| ComboData__[]) => string)_ - -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 +This article introduces the configuration of combo attributes, with the configuration located as follows: + +```js {5-9} +import { Graph } from '@antv/g6'; + +const graph = new Graph({ + combo: { + type: 'circle', + style: {}, + state: {}, + palette: {}, + animation: {}, + }, +}); +``` + +| Attribute | Description | Type | Default Value | +| --------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | +| type | The type of the combo, either a built-in combo type or a custom combo name | string | `circle` | +| style | The combo's style, including color, size, etc. | [Style](#style-attributes-style) | - | +| state | Defines the style of the combo in different states | Record | - | +| palette | Defines the color palette of the combo, used to map colors based on different data | [Palette](#palette-attributes-palette) | - | +| animation | Defines the animation effect of the combo | [Animation](#animation-attributes-animation) | - | + +## Type Attribute (type) + +Specifies the type of the combo, which can be either the name of a built-in combo type or a custom combo name. The default is `circle` (circular combo). + +For more built-in combo types, see the [Combo Registry](/en/manual/getting-started/extensions#combos). + +## Style Attributes (style) + +Defines the style of the combo, including color, size, etc. + + + +> To understand the composition of a combo, please read [Core Concepts - Elements - Combo](/en/manual/core-concept/element#combo). + +The following style configurations will be explained in terms of atomic graphic properties: + +### Expand Style (key) + +| Attribute | Description | Type | Default Value | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------- | +| 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 | +| fill | Fill color | string | `#fff` | +| stroke | Border color | string | `#000` | +| lineWidth | Border width | number | 1 | +| `${StyleProps}` | More graphic configurations, refer to [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object) for details. For example, fillOpacity refers to the fill opacity of the main shape. | [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object) | - | + +### Collapsed Style (collapsed) + +| 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 | +| collapseFill | Fill color | string | `#fff` | +| collapsedStroke | Border color | string | `#000` | +| collapsedLineWidth | Border width | number | 1 | +| `collapsed${StyleProps}` | More graphic configurations, refer to [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object#drawing-properties). For example, fillOpacity refers to the fill opacity of the main shape. | [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object#drawing-properties) | - | + +### 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) | - | + +### Label Style (label) + +| Attribute | Description | Type | Default Value | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| label | Whether to display the combo label | boolean | true | +| labelText | Label text content | string | - | +| labelFill | Label text color | string | - | +| labelFontSize | Label font size | number | 12 | +| labelFontWeight | Label font weight | number | string | `normal` | +| labelPlacement | The position of the label relative to the main combo shape | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` | +| labelOffsetX | Horizontal offset of the label | number | 0 | +| labelOffsetY | Vertical offset of the label | number | 0 | +| labelWordWrap | Whether to enable text wrapping. When labelWordWrap is enabled, text exceeding labelMaxWidth will automatically wrap | boolean | false | +| labelMaxWidth | Maximum width of the label. When text wrapping is enabled, text will wrap if it exceeds this width
- string: Defined as a percentage of the combo width. For example, `50%` means the label width is no more than half of the combo width.
- number: Defined in pixels. For example, 100 means the maximum width of the label is 100 pixels | number | string | `200%` | +| labelMaxLines | Maximum number of lines for the label | number | 1 | +| labelPadding | Padding inside the label | number | number[] | 0 | +| `label${StyleProps}` | More label style configurations, refer to [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text). For example, labelFontSize refers to the font size of the label text. | [TextStyleProps](https://g.antv.antgroup.com/en/api/basic/text) | - | +| labelBackground | Whether to display the background | boolean | false | +| labelBackgroundFill | Background fill color | string | - | +| labelBackgroundRadius | Background border radius
- number: Sets all four corners with the same radius
- number[]: Sets each corner radius individually. If there are fewer than four values, the remaining ones are automatically filled | number | number[] | + +## State Attributes (state) + +In some interactive behaviors, such as clicking to select a node or hovering to activate an edge, a certain state is merely flagged for that element. To reflect these states in the visual space seen by the end user, we need to set different graphical element styles for different states to respond to changes in the state of the graphical element. + +G6 provides several built-in states, including selected, highlighted, active, inactive, and disabled. Additionally, it supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the default styles of the elements. + +For example, when a combo is in the `focus` state, you can add a stroke with a width of 3 and an orange color. + +```json +{ + "combo": { + "state": { + "focus": { + "lineWidth": 3, + "stroke": "orange", + "fill": "orange", + "fillOpacity": 0.2 + } + } + } +} +``` + +The effect is shown in the figure below: + +```js | ob { pin: false } +createGraph( + { + autoFit: 'center', + data: { + nodes: [{ id: 'node1', combo: 'combo1' }], + combos: [{ id: 'combo1', states: ['focus'] }], + }, + combo: { + state: { + focus: { + lineWidth: 3, + stroke: 'orange', + fill: 'orange', + fillOpacity: 0.2, + }, + }, + }, + }, + { width: 200, height: 100 }, +); +``` + +## Animation Attributes (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. + +> For the definition of the palette, please refer to [Core Concepts - Palette](/en/manual/core-concept/palette). + +| Attribute | Description | Type | Default Value | +| --------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- | +| type | Specifies the current palette type.
- `group`: Discrete palette
- `value`: Continuous palette | `group` | `value` | `group` | +| field | Specifies the grouping field in the element data. If not specified, the default is to take `id` as the grouping field | string | ((datum) => string) | `id` | +| 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: + +```json +{ + "combo": { + "palette": { + "type": "group", + "field": "category", + "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"] + } + } +} +``` + +The effect is shown in the figure below: + +```js | ob { pin: false } +createGraph( + { + data: { + combos: new Array(8) + .fill(0) + .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 8 }, + combo: { + style: { fillOpacity: 0.4 }, + palette: { + type: 'group', + field: 'category', + color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'], + }, + }, + }, + { width: 600, height: 100 }, +); +``` + +You can also use the default configuration: + +```json +{ + "combo": { + "palette": "tableau" // 'tableau' is the name of the palette, by default colors are assigned based on ID + } +} +``` + +The effect is shown in the figure below: + +```js | ob { pin: false } +createGraph( + { + data: { + combos: new Array(8) + .fill(0) + .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })), + }, + layout: { type: 'grid', cols: 8 }, + combo: { + style: { fillOpacity: 0.4 }, + palette: 'tableau', + }, + }, + { width: 600, height: 100 }, +); +``` diff --git a/packages/site/docs/api/elements/edges/BaseEdge.en.md b/packages/site/docs/api/elements/edges/BaseEdge.en.md new file mode 100644 index 00000000000..e7935b9f492 --- /dev/null +++ b/packages/site/docs/api/elements/edges/BaseEdge.en.md @@ -0,0 +1,297 @@ +--- +title: Edge Configuration +order: 0 +--- + +This article introduces the configuration of edge attributes. The configuration is located as follows: + +```js {5-9} +import { Graph } from '@antv/g6'; + +const graph = new Graph({ + edge: { + type: 'line', + style: {}, + state: {}, + palette: {}, + animation: {}, + }, +}); +``` + +| Attribute | Description | Type | Default Value | +| --------- | --------------------------------------------------------------------- | -------------------------------------------- | ------------- | +| type | The edge type, either a built-in edge type name or a custom edge name | string | `line` | +| style | The edge style, including attributes like color and size | [Style](#edge-style-style) | - | +| state | Defines the edge's style in various states | Record | - | +| palette | Defines a color palette for mapping edge colors based on data | [Palette](#palette-attributes-palette) | - | +| animation | Defines animation effects for the edge | [Animation](#animation-attributes-animation) | - | + +## Edge Type (type) + +The `type` attribute specifies the edge type, which can be either a built-in type or a custom name. By default, it is set to `line` (a straight edge). + +For more built-in edge types, refer to the [Edge Registry](/en/manual/getting-started/extensions#edges). + +## Edge Style (style) + +This attribute defines the edge's visual style, including elements such as color and size. + + + +> For a deeper understanding of the structure of edges, please see [Core Concepts - Elements - Edge](/en/manual/core-concept/element#edges). + +Below is a breakdown of style configurations: + +### Main Shape Style + +| Attribute | Description | Type | Default Value | +| --------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------- | +| stroke | The stroke color of the edge | string | `#000` | +| lineWidth | The width of the edge stroke | number | 1 | +| lineDash | The dash offset for the edge line | number | 0 | +| sourcePort | The port where the edge starts (source) | string | - | +| targetPort | The port where the edge ends (target) | string | - | +| isBillboard | In 3D scenes, this ensures the edge always faces the screen, so line width is unaffected by perspective | boolean | true | +| `${StyleProps}` | Additional style configurations, refer to [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) values | [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | - | + +### Label Style + +| Attribute | Description | Type | Default Value | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------- | +| label | Whether the label should be displayed on the edge | boolean | true | +| labelAutoRotate | Whether to automatically rotate the label to match the edge's direction | boolean | true | +| 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` | +| 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%` | +| labelMaxLines | The maximum number of lines for the label text | number | 1 | +| 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 | - | +| labelBackgroundRadius | The corner radius of the label background. Can be a single value or an array for each corner | number | number[] | 0 | + +### Halo Style + +| Attribute | Description | Type | Default Value | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------------------- | +| halo | Whether to display a halo around the edge | boolean | false | +| haloStroke | The stroke color of the halo | string | Matches main shape fill | +| haloLineWidth | The stroke width of the halo | number | 3 | +| `halo${StyleProps}` | Additional style configurations for the halo, such as stroke opacity, refer to [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | [PathStyleProps](https://g.antv.antgroup.com/en/api/basic/path) | - | + +### Badge Style + +| 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` | +| 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 | +| `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 | + +### 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` | + +### 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` | + +### 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) | - | + +## State Style Attributes (state) + +In interactive behaviors such as selecting an edge by clicking or activating an edge by hovering over it, the element merely marks its state. To visually reflect these states to the user, we assign different styles for each state of the graphical element in response to state changes. + +G6 provides several built-in states, including `selected`, `highlight`, `active`, `inactive`, and `disabled`, and also supports custom states for more specific requirements. For each state, developers can define a set of style rules that override the element's default styles. + +For instance, when an edge is in the `focus` state, a halo with a width of 6 and a yellow color can be added. + +```json +{ + "edge": { + "state": { + "focus": { + "halo": true, + "haloLineWidth": 6, + "haloStroke": "yellow" + } + } + } +} +``` + +### Animation Attributes (animation) + +Defines animation effects for edges. The following configurations are + +supported: + +1. Disable all edge animations: + +```json +{ + "edge": { + "animation": false + } +} +``` + +2. Stage-based animation configuration: + +Stage animations refer to effects applied when an edge enters, updates, or exits the canvas. Supported stages include: + +- `enter`, `update`, `exit`, `show`, `hide`, `collapse`, and `expand`. + +To configure animations using a paradigm: + +```json +{ + "node": { + "animation": { + "update": [ + { + "fields": ["stroke"], // Animate only the stroke property + "duration": 1000, // Duration of the animation + "easing": "linear" // Easing function + } + ], + } +} +``` + +### Palette Attributes (palette) + +Defines a predefined color pool for edges and maps colors to the `stroke` property according to rules. + +> For palette definitions, refer to [Core Concepts - Palette](/en/manual/core-concept/palette). + +| Attribute | Description | Type | Default Value | +| --------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- | +| type | Specifies the palette type.
- `group`: Discrete palette
- `value`: Continuous palette | `group` | `value` | `group` | +| field | Specifies the grouping field in the element's data. If not specified, the default is `id`. | string | ((datum) => string) | `id` | +| color | Palette colors. If the palette is registered, you can directly specify its registered name, or pass an array of colors. | string | string[] | - | +| invert | Whether to invert the palette | boolean | false | + +For example, to assign node colors based on the `direction` field so that nodes with the same category have the same color: + +```json +{ + "edge": { + "palette": { + "type": "group", + "field": "direction", + "color": ["#F08F56", "#00C9C9"] + } + } +} +``` + +The effect is shown below: + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })), + edges: [ + { source: 'node-1', target: 'node-2', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-3', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-4', data: { direction: 'out' } }, + { source: 'node-5', target: 'node-1', data: { direction: 'in' } }, + { source: 'node-6', target: 'node-1', data: { direction: 'in' } }, + ], + }, + layout: { + type: 'radial', + unitRadius: 120, + linkDistance: 120, + }, + edge: { + style: { + endArrow: true, + }, + palette: { + type: 'group', + field: 'direction', + color: ['#F08F56', '#00C9C9'], + }, + }, + }, + { width: 600, height: 300 }, +); +``` + +You can also use the default configuration: + +```json +{ + "edge": { + "palette": "tableau" // tableau is the palette name, it assigns colors based on ID by default. + } +} +``` + +The effect is shown below: + +```js | ob { pin: false } +createGraph( + { + data: { + nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })), + edges: [ + { source: 'node-1', target: 'node-2', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-3', data: { direction: 'out' } }, + { source: 'node-1', target: 'node-4', data: { direction: 'out' } }, + { source: 'node-5', target: 'node-1', data: { direction: 'in' } }, + { source: 'node-6', target: 'node-1', data: { direction: 'in' } }, + ], + }, + layout: { + type: 'radial', + unitRadius: 120, + linkDistance: 120, + }, + edge: { + style: { + endArrow: true, + }, + palette: 'tableau', + }, + }, + { width: 600, height: 300 }, +); +``` diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md index 42d8580d9da..d47510e1269 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.en.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -8,7 +8,7 @@ This document introduces node properties. | Property | Description | Type | Default Value | | --------- | ------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | | type | Node type, either a built-in node type name or a custom node name | string | `circle` | -| style | Node style, including color, size, etc. | [Style](#style-properties-style) | - | +| style | Node style, including color, size, etc. | [Style](#style-property-style) | - | | state | Defines styles for nodes in different states | Record | - | | palette | Defines the color palette for nodes, used to map colors to different data | [Palette](#palette-properties-palette) | - | | animation | Defines animation effects for nodes | [Animation](#animation-properties) | - | diff --git a/packages/site/docs/api/elements/nodes/BaseNode.zh.md b/packages/site/docs/api/elements/nodes/BaseNode.zh.md index 348dbf50c82..d74a6c9bb9b 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.zh.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.zh.md @@ -25,7 +25,7 @@ const graph = new Graph({ | style | 节点样式，包括颜色、大小等 | [Style](#样式属性-style) | - | | state | 定义节点在不同状态下的样式 | Record | - | | palette | 定义节点的色板，用于根据不同数据映射颜色 | [Palette](#色板属性-palette) | - | -| animation | 定义节点的动画效果 | [Animation](#动画-animation) | - | +| animation | 定义节点的动画效果 | [Animation](#动画属性-animation) | - | ## 类型 type From f0066f4bb7e2d8bce599e411064517e9487a7e0f Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Fri, 29 Nov 2024 14:11:06 +0800 Subject: [PATCH 11/14] docs: update element demos --- packages/site/common/api/elements/combos/circle-combo.md | 2 ++ packages/site/common/api/elements/combos/rect-combo.md | 2 ++ packages/site/common/api/elements/edges/cubic-horizontal.md | 2 ++ packages/site/common/api/elements/edges/cubic-vertical.md | 2 ++ packages/site/common/api/elements/edges/cubic.md | 2 ++ packages/site/common/api/elements/edges/line.md | 2 ++ packages/site/common/api/elements/edges/polyline.md | 2 ++ packages/site/common/api/elements/edges/quadratic.md | 2 ++ packages/site/common/api/elements/nodes/circle.md | 2 ++ packages/site/common/api/elements/nodes/diamond.md | 2 ++ packages/site/common/api/elements/nodes/donut.md | 2 ++ packages/site/common/api/elements/nodes/ellipse.md | 2 ++ packages/site/common/api/elements/nodes/hexagon.md | 2 ++ packages/site/common/api/elements/nodes/html.md | 2 ++ packages/site/common/api/elements/nodes/image.md | 2 ++ packages/site/common/api/elements/nodes/rect.md | 2 ++ packages/site/common/api/elements/nodes/star.md | 2 ++ packages/site/common/api/elements/nodes/triangle.md | 2 ++ 18 files changed, 36 insertions(+) diff --git a/packages/site/common/api/elements/combos/circle-combo.md b/packages/site/common/api/elements/combos/circle-combo.md index ce93a5e103d..cb936d7404f 100644 --- a/packages/site/common/api/elements/combos/circle-combo.md +++ b/packages/site/common/api/elements/combos/circle-combo.md @@ -23,3 +23,5 @@ createGraph( }, ); ``` + +设置 `combo.type` 为 `circle` 以使用圆形组合。 diff --git a/packages/site/common/api/elements/combos/rect-combo.md b/packages/site/common/api/elements/combos/rect-combo.md index 9e99a51bca8..35203708816 100644 --- a/packages/site/common/api/elements/combos/rect-combo.md +++ b/packages/site/common/api/elements/combos/rect-combo.md @@ -24,3 +24,5 @@ createGraph( }, ); ``` + +设置 `combo.type` 为 `rect` 以使用矩形组合。 diff --git a/packages/site/common/api/elements/edges/cubic-horizontal.md b/packages/site/common/api/elements/edges/cubic-horizontal.md index 62d9d263677..92b00fbd12f 100644 --- a/packages/site/common/api/elements/edges/cubic-horizontal.md +++ b/packages/site/common/api/elements/edges/cubic-horizontal.md @@ -64,3 +64,5 @@ createGraph( }, ); ``` + +设置 `edge.type` 为 `cubic-horizontal` 以使用水平方向的三次贝塞尔曲线。 diff --git a/packages/site/common/api/elements/edges/cubic-vertical.md b/packages/site/common/api/elements/edges/cubic-vertical.md index f5523081ca5..52f3ba10523 100644 --- a/packages/site/common/api/elements/edges/cubic-vertical.md +++ b/packages/site/common/api/elements/edges/cubic-vertical.md @@ -64,3 +64,5 @@ createGraph( }, ); ``` + +设置 `edge.type` 为 `cubic-vertical` 以使用垂直方向的三次贝塞尔曲线。 diff --git a/packages/site/common/api/elements/edges/cubic.md b/packages/site/common/api/elements/edges/cubic.md index bcaa742d084..d8d3a12d5c4 100644 --- a/packages/site/common/api/elements/edges/cubic.md +++ b/packages/site/common/api/elements/edges/cubic.md @@ -50,3 +50,5 @@ createGraph( }, ); ``` + +设置 `edge.type` 为 `cubic` 以使用三次贝塞尔曲线。 diff --git a/packages/site/common/api/elements/edges/line.md b/packages/site/common/api/elements/edges/line.md index 35afcbf486f..19f376dd4a9 100644 --- a/packages/site/common/api/elements/edges/line.md +++ b/packages/site/common/api/elements/edges/line.md @@ -36,3 +36,5 @@ createGraph( }, ); ``` + +设置 `edge.type` 为 `line` 以使用直线。 diff --git a/packages/site/common/api/elements/edges/polyline.md b/packages/site/common/api/elements/edges/polyline.md index a853c9b36e4..ae940c77258 100644 --- a/packages/site/common/api/elements/edges/polyline.md +++ b/packages/site/common/api/elements/edges/polyline.md @@ -102,3 +102,5 @@ createGraph( }, ); ``` + +设置 `edge.type` 为 `polyline` 以使用折线。 diff --git a/packages/site/common/api/elements/edges/quadratic.md b/packages/site/common/api/elements/edges/quadratic.md index 8e5e6c897ac..0d33e96d36a 100644 --- a/packages/site/common/api/elements/edges/quadratic.md +++ b/packages/site/common/api/elements/edges/quadratic.md @@ -50,3 +50,5 @@ createGraph( }, ); ``` + +设置 `edge.type` 为 `quadratic` 以使用曲线。 diff --git a/packages/site/common/api/elements/nodes/circle.md b/packages/site/common/api/elements/nodes/circle.md index f75a74983b2..803ab9fa4de 100644 --- a/packages/site/common/api/elements/nodes/circle.md +++ b/packages/site/common/api/elements/nodes/circle.md @@ -21,3 +21,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `circle` 以使用圆形节点。 diff --git a/packages/site/common/api/elements/nodes/diamond.md b/packages/site/common/api/elements/nodes/diamond.md index f3f5aa9162a..59bb7159927 100644 --- a/packages/site/common/api/elements/nodes/diamond.md +++ b/packages/site/common/api/elements/nodes/diamond.md @@ -23,3 +23,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `diamond` 以使用菱形节点。 diff --git a/packages/site/common/api/elements/nodes/donut.md b/packages/site/common/api/elements/nodes/donut.md index 5c76885fbae..44daeea4270 100644 --- a/packages/site/common/api/elements/nodes/donut.md +++ b/packages/site/common/api/elements/nodes/donut.md @@ -40,3 +40,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `donut` 以使用甜甜圈节点。 diff --git a/packages/site/common/api/elements/nodes/ellipse.md b/packages/site/common/api/elements/nodes/ellipse.md index db74d72e5b4..b7e99d940da 100644 --- a/packages/site/common/api/elements/nodes/ellipse.md +++ b/packages/site/common/api/elements/nodes/ellipse.md @@ -23,3 +23,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `ellipse` 以使用椭圆形节点。 diff --git a/packages/site/common/api/elements/nodes/hexagon.md b/packages/site/common/api/elements/nodes/hexagon.md index 815a4176886..9af45a4079b 100644 --- a/packages/site/common/api/elements/nodes/hexagon.md +++ b/packages/site/common/api/elements/nodes/hexagon.md @@ -25,3 +25,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `hexagon` 以使用六边形节点。 diff --git a/packages/site/common/api/elements/nodes/html.md b/packages/site/common/api/elements/nodes/html.md index 04f265c67da..2ec5ec0ce7a 100644 --- a/packages/site/common/api/elements/nodes/html.md +++ b/packages/site/common/api/elements/nodes/html.md @@ -46,3 +46,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `html` 以使用 HTML 节点。 diff --git a/packages/site/common/api/elements/nodes/image.md b/packages/site/common/api/elements/nodes/image.md index af143ab8090..730c4ccd7be 100644 --- a/packages/site/common/api/elements/nodes/image.md +++ b/packages/site/common/api/elements/nodes/image.md @@ -35,3 +35,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `image` 以使用图片节点。 diff --git a/packages/site/common/api/elements/nodes/rect.md b/packages/site/common/api/elements/nodes/rect.md index fbe4a48a785..c6ae3e5b733 100644 --- a/packages/site/common/api/elements/nodes/rect.md +++ b/packages/site/common/api/elements/nodes/rect.md @@ -23,3 +23,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `rect` 以使用矩形节点。 diff --git a/packages/site/common/api/elements/nodes/star.md b/packages/site/common/api/elements/nodes/star.md index c00bba3a146..41f83af2b11 100644 --- a/packages/site/common/api/elements/nodes/star.md +++ b/packages/site/common/api/elements/nodes/star.md @@ -25,3 +25,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `star` 以使用星形节点。 diff --git a/packages/site/common/api/elements/nodes/triangle.md b/packages/site/common/api/elements/nodes/triangle.md index 91388a41f91..03678273e60 100644 --- a/packages/site/common/api/elements/nodes/triangle.md +++ b/packages/site/common/api/elements/nodes/triangle.md @@ -25,3 +25,5 @@ createGraph( }, ); ``` + +设置 `node.type` 为 `triangle` 以使用三角形节点。 From 341066ea761fadba03f0cdab26e9aa55edb3051f Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 29 Nov 2024 14:42:08 +0800 Subject: [PATCH 12/14] 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 From 1c4c2d1a91baaabf19d9f5ef7b4bb0eaac6ddb9f Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 29 Nov 2024 14:54:20 +0800 Subject: [PATCH 13/14] docs: update custom-element doc --- .../manual/custom-extension/element.en.md | 30 +++++++++---------- .../manual/custom-extension/element.zh.md | 18 ++++++----- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/site/docs/manual/custom-extension/element.en.md b/packages/site/docs/manual/custom-extension/element.en.md index 5f40fc64da4..82c1bb44e90 100644 --- a/packages/site/docs/manual/custom-extension/element.en.md +++ b/packages/site/docs/manual/custom-extension/element.en.md @@ -17,7 +17,7 @@ Before starting to customize an element, you need to understand some important p > Record -The mapping table of all graphics under the current element +The mapping table of all shapes under the current element #### animateMap @@ -29,18 +29,18 @@ The mapping table of all animations under the current element #### upsert(key, Ctor, style, container) -Create or update graphics, and automatically destroy the graphics when the element is destroyed +Create or update shapes, and automatically destroy the shapes when the element is destroyed ```typescript upsert(key: string, Ctor: { new (...args: any[]): DisplayObject }, style: Record, container: DisplayObject); ``` -| Parameter | Type | Description | -| --------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| key | string | The key of the graphic, that is, the corresponding key in `shapeMap`. Built-in keys include `'key'`, `'label'`, `'halo'`, `'icon'`, `'port'`, `'badge'` | -| Ctor | { new (...args: any[]): DisplayObject } | The constructor for the graphic class | -| style | Record | The style of the graphic | -| container | DisplayObject | The container where the graphic is mounted | +| Parameter | Type | Description | +| --------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| key | string | The key of the shape, that is, the corresponding key in `shapeMap`. Built-in keys include `'key'`, `'label'`, `'halo'`, `'icon'`, `'port'`, `'badge'`
The key should not use special symbols. Based on this value, it will be transformed into camelCase to call the `getXxxStyle` and `drawXxxShape` methods (see [Element Convention](#element-convention)) | +| Ctor | { new (...args: any[]): DisplayObject } | The constructor for the shape class | +| style | Record | The style of the shape | +| container | DisplayObject | The container where the shape is mounted | #### render(style, container) @@ -65,17 +65,15 @@ The element provides the following hook functions, which can be overridden as ne ### Element Convention -- **Use Conventional Attributes** +- Obtain the size of the element through `this.getSize()`. - The currently agreed-upon element attributes include: +- **Adopt the paired way of `getXxxStyle` and `drawXxxShape` for shape drawing** - 1. `size`: The size of the element +`getXxxStyle` is used to obtain the shape style, and `drawXxxShape` is used to draw the shape. The shape created through this way supports automatic execution of animations. -- **Use the `getXxxStyle` and `drawXxxShape` pairing method for graphic drawing** +> Among them, `Xxx` is the camelCase form of the key passed in when calling the [upsert](#methods) method. - `getXxxStyle` is used to obtain the graphic style, and `drawXxxShape` is used for drawing the graphic. Graphics created in this way support automatic animation execution. - -- **The Graph context can be accessed via `attributes.context`** +- **The Graph context can be accessed through `this.context`** ## Custom Node @@ -190,7 +188,7 @@ class CustomCircle extends CustomElement { } ``` -To implement graphical animation, you need to override the `animate` method to perform the animation operations on the `CustomCircle` onto the `Circle` graphic: +To implement graphical animation, you need to override the `animate` method to perform the animation operations on the `CustomCircle` onto the `Circle` shape: ```typescript import type {} from '@antv/g'; diff --git a/packages/site/docs/manual/custom-extension/element.zh.md b/packages/site/docs/manual/custom-extension/element.zh.md index 2855666bc49..41251d1dbe7 100644 --- a/packages/site/docs/manual/custom-extension/element.zh.md +++ b/packages/site/docs/manual/custom-extension/element.zh.md @@ -35,12 +35,12 @@ order: 0 upsert(key: string, Ctor: { new (...args: any[]): DisplayObject }, style: Record, container: DisplayObject); ``` -| 参数 | 类型 | 描述 | -| --------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -| key | string | 图形的 key，即 `shapeMap` 中对应的 key。内置的 key 包括 `'key'` `'label'` `'halo'` `'icon'` `'port'` `'badge'` | -| Ctor | { new (...args: any[]): DisplayObject } | 图形类 | -| style | Record | 图形样式 | -| container | DisplayObject | 挂载图形的容器 | +| 参数 | 类型 | 描述 | +| --------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| key | string | 图形的 key，即 `shapeMap` 中对应的 key。内置的 key 包括 `'key'` `'label'` `'halo'` `'icon'` `'port'` `'badge'`
key 不应使用特殊符号，会基于该值转化为驼峰形式调用 `getXxxStyle` 和 `drawXxxShape` 方法（见[元素约定](#元素约定)） | +| Ctor | { new (...args: any[]): DisplayObject } | 图形类 | +| style | Record | 图形样式 | +| container | DisplayObject | 挂载图形的容器 | #### render(style, container) @@ -69,13 +69,15 @@ render(style: Record, container: Group): void; 目前约定的元素属性包括： -1. `size` 元素的尺寸 +- 通过 `this.getSize()` 获取元素的尺寸 - **采用 `getXxxStyle` 和 `drawXxxShape` 配对的方式进行图形绘制** `getXxxStyle` 用于获取图形样式，`drawXxxShape` 用于绘制图形。通过该方式创建的图形支持自动执行动画。 -- **可通过 `attributes.context` 访问 Graph 上下文** +> 其中 `Xxx` 是调用 [upsert](#方法) 方法时传入的 key 的驼峰形式。 + +- **可通过 `this.context` 访问 Graph 上下文** ## 自定义节点 From 136875000f8ac30e5c6c4e700212443997b2fc36 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 29 Nov 2024 14:57:28 +0800 Subject: [PATCH 14/14] docs: fix typo --- .../behaviors/optimize-viewport-transform.ts | 2 +- packages/g6/src/elements/edges/base-edge.ts | 10 ++--- packages/g6/src/elements/nodes/base-node.ts | 4 +- packages/g6/src/elements/shapes/base-shape.ts | 4 +- packages/g6/src/plugins/minimap/index.ts | 2 +- packages/g6/src/utils/cache.ts | 10 ++--- packages/g6/src/utils/style.ts | 10 ++--- .../docs/api/elements/combos/BaseCombo.en.md | 38 ++++++++-------- .../docs/api/elements/nodes/BaseNode.en.md | 44 +++++++++---------- .../docs/manual/core-concept/animation.en.md | 4 +- .../docs/manual/core-concept/element.en.md | 6 +-- 11 files changed, 67 insertions(+), 67 deletions(-) diff --git a/packages/g6/src/behaviors/optimize-viewport-transform.ts b/packages/g6/src/behaviors/optimize-viewport-transform.ts index 444ff5e02f3..437e674426c 100644 --- a/packages/g6/src/behaviors/optimize-viewport-transform.ts +++ b/packages/g6/src/behaviors/optimize-viewport-transform.ts @@ -24,7 +24,7 @@ export interface OptimizeViewportTransformOptions extends BaseBehaviorOptions { /** * 指定始终显示的图形元素。应用此交互后，在画布操作过程中，只有通过该属性指定的图形元素会保持可见，其余图形元素将被隐藏，从而提升渲染性能。默认情况下，节点始终可见，而其他图形元素在操作画布过程中会自动隐藏 * - * Specify the graphic elements that are always visible. After applying this interaction, only the graphic elements specified by this property will remain visible during the canvas operation, and the rest of the graphic elements will be hidden to improve rendering performance. By default, nodes are always visible, while other graphic elements are automatically hidden during canvas operations + * Specify the shapes that are always visible. After applying this interaction, only the shapes specified by this property will remain visible during the canvas operation, and the rest of the shapes will be hidden to improve rendering performance. By default, nodes are always visible, while other shapes are automatically hidden during canvas operations */ shapes?: | { node?: string[]; edge?: string[]; combo?: string[] } diff --git a/packages/g6/src/elements/edges/base-edge.ts b/packages/g6/src/elements/edges/base-edge.ts index b43c399cff3..b21a86ee068 100644 --- a/packages/g6/src/elements/edges/base-edge.ts +++ b/packages/g6/src/elements/edges/base-edge.ts @@ -126,33 +126,33 @@ export interface BaseEdgeStyleProps /** * 在 “起点” 处添加一个标记图形，其中 “起始点” 为边与起始节点的交点 * - * Add a marker graphic at the "start point", where the "start point" is the intersection of the edge and the source node + * Add a marker at the "start point", where the "start point" is the intersection of the edge and the source node */ markerStart?: DisplayObject | null; /** * 调整 “起点” 处标记图形的位置，正偏移量向内，负偏移量向外 * - * Adjust the position of the marker graphic at the "start point", positive offset inward, negative offset outward + * Adjust the position of the marker at the "start point", positive offset inward, negative offset outward * @defaultValue 0 */ markerStartOffset?: number; /** * 在 “终点” 处添加一个标记图形，其中 “终点” 为边与终止节点的交点 * - * Add a marker graphic at the "end point", where the "end point" is the intersection of the edge and the target node + * Add a marker at the "end point", where the "end point" is the intersection of the edge and the target node */ markerEnd?: DisplayObject | null; /** * 调整 “终点” 处标记图形的位置，正偏移量向内，负偏移量向外 * - * Adjust the position of the marker graphic at the "end point", positive offset inward, negative offset outward + * Adjust the position of the marker at the "end point", positive offset inward, negative offset outward * @defaultValue 0 */ markerEndOffset?: number; /** * 在路径除了 “起点” 和 “终点” 之外的每一个顶点上放置标记图形。在内部实现中，由于我们会把路径中部分命令转换成 C 命令，因此这些顶点实际是三阶贝塞尔曲线的控制点 * - * Place a marker graphic on each vertex of the path except for the "start point" and "end point". In the internal implementation, because we will convert some commands in the path to C commands, these controlPoints are actually the control points of the cubic Bezier curve + * Place a marker on each vertex of the path except for the "start point" and "end point". In the internal implementation, because we will convert some commands in the path to C commands, these controlPoints are actually the control points of the cubic Bezier curve */ markerMid?: DisplayObject | null; /** diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts index 94c85fabed6..748f89b09d1 100644 --- a/packages/g6/src/elements/nodes/base-node.ts +++ b/packages/g6/src/elements/nodes/base-node.ts @@ -452,7 +452,7 @@ export abstract class BaseNode 在离屏画布中获取图形包围盒 * - * Get the bounding box of the graphic in the off-screen canvas + * Get the bounding box of the shape in the off-screen canvas * @param context - 运行时上下文 Runtime context * @param shape - 图形实例 Graphic instance * @returns 图形包围盒 Graphic bounding box @@ -462,7 +462,7 @@ function getBoundsInOffscreen(context: RuntimeContext, shape: DisplayObject) { // 将主图形靠背至全局空间，避免受到父级 transform 的影响 // 合理的操作应该是拷贝至离屏画布，但目前 G 有点问题 - // Move the main graphic to the global space to avoid being affected by the parent transform + // Move the main shape to the global space to avoid being affected by the parent transform // The reasonable operation should be moved to the off-screen canvas, but there is a problem with G at present const canvas = context.canvas.getLayer(); const substitute = shape.cloneNode(); diff --git a/packages/g6/src/elements/shapes/base-shape.ts b/packages/g6/src/elements/shapes/base-shape.ts index 05988be2bb4..3068365a150 100644 --- a/packages/g6/src/elements/shapes/base-shape.ts +++ b/packages/g6/src/elements/shapes/base-shape.ts @@ -153,8 +153,8 @@ export abstract class BaseShape extends /** * 从给定的属性对象中提取图形样式属性。删除特定的属性，如位置、变换和类名 * - * Extracts the graphic style properties from a given attribute object. - * Removes specific properties like position, transformation, and class name. + * Extracts the shape styles from a given attribute object. + * Removes specific styles like position, transformation, and class name. * @param style - 属性对象 | attribute object * @returns 仅包含样式属性的对象 | An object containing only the style properties. */ diff --git a/packages/g6/src/plugins/minimap/index.ts b/packages/g6/src/plugins/minimap/index.ts index 5b542f3b2eb..7eed3f2b055 100644 --- a/packages/g6/src/plugins/minimap/index.ts +++ b/packages/g6/src/plugins/minimap/index.ts @@ -58,7 +58,7 @@ export interface MinimapOptions extends BasePluginOptions { * - 也可以传入一个函数，接收元素的 id 和类型，返回一个图形 * * - * - 'key' uses the key shape of the element as the thumbnail graphic + * - 'key' uses the key shape of the element as the thumbnail shape * - You can also pass in a function that receives the id and type of the element and returns a shape */ shape?: 'key' | ((id: string, elementType: ElementType) => DisplayObject); diff --git a/packages/g6/src/utils/cache.ts b/packages/g6/src/utils/cache.ts index e20fdf47bab..732c50fc1ea 100644 --- a/packages/g6/src/utils/cache.ts +++ b/packages/g6/src/utils/cache.ts @@ -8,8 +8,8 @@ const getStyleCacheKey = (name: string) => `__${name}__`; /** * 缓存图形样式 * - * Cache graphic style - * @param element - 图形元素 | graphic element + * Cache shape style + * @param element - 图形元素 | shape element * @param name - 样式名 | style name */ export function cacheStyle(element: DisplayObject, name: string | string[]) { @@ -24,7 +24,7 @@ export function cacheStyle(element: DisplayObject, name: string | string[]) { * 获取缓存的样式 * * Get cached style - * @param element - 图形元素 | graphic element + * @param element - 图形元素 | shape element * @param name - 样式名 | style name * @returns 样式值 | style value */ @@ -36,7 +36,7 @@ export function getCachedStyle(element: DisplayObject, name: string) { * 是否有缓存的样式 * * Whether there is a cached style - * @param element - 图形元素 | graphic element + * @param element - 图形元素 | shape element * @param name - 样式名 | style name * @returns 是否有缓存的样式 | Whether there is a cached style */ @@ -48,7 +48,7 @@ export function hasCachedStyle(element: DisplayObject, name: string) { * 设置缓存的样式 * * Set cached style - * @param element - 图形元素 | graphic element + * @param element - 图形元素 | shape element * @param name - 样式名 | style name * @param value - 样式值 | style value */ diff --git a/packages/g6/src/utils/style.ts b/packages/g6/src/utils/style.ts index 858ab1fca47..299f24f7a42 100644 --- a/packages/g6/src/utils/style.ts +++ b/packages/g6/src/utils/style.ts @@ -34,7 +34,7 @@ export function computeElementCallbackStyle( /** * 合并图形配置项 * - * Merge graphic configuration + * Merge shape configuration * @param opt1 - 配置项1 | configuration 1 * @param opt2 - 配置项2 | configuration 2 * @returns 合并后的配置项 | merged configuration @@ -50,14 +50,14 @@ export function mergeOptions(opt1: DisplayObjectConfig, opt2: DisplayObject /** * 获取图形子图形样式 * - * Get the style of the sub-shape of the graphic - * @param style - 图形样式 | graphic style + * Get the style of the sub-shape of the shape + * @param style - 图形样式 | shape style * @returns 子图形样式 | sub-shape style * @remarks * 从给定的属性对象中提取图形样式属性。删除特定的属性，如位置、变换和类名 * - * Extracts the graphic style properties from a given attribute object. - * Removes specific properties like position, transformation, and class name. + * Extracts the shape styles from a given attribute object. + * Removes specific styles like position, transformation, and class name. */ export function getSubShapeStyle>( style: T, diff --git a/packages/site/docs/api/elements/combos/BaseCombo.en.md b/packages/site/docs/api/elements/combos/BaseCombo.en.md index 85362d21f63..c624902661e 100644 --- a/packages/site/docs/api/elements/combos/BaseCombo.en.md +++ b/packages/site/docs/api/elements/combos/BaseCombo.en.md @@ -41,31 +41,31 @@ Defines the style of the combo, including color, size, etc. > To understand the composition of a combo, please read [Core Concepts - Elements - Combo](/en/manual/core-concept/element#combo). -The following style configurations will be explained in terms of atomic graphic properties: +The following style configurations will be explained in terms of atomic styles: ### Expand Style (key) -| Attribute | Description | Type | Default Value | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------- | -| 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 | -| fill | Fill color | string | `#fff` | -| stroke | Border color | string | `#000` | -| lineWidth | Border width | number | 1 | -| `${StyleProps}` | More graphic configurations, refer to [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object) for details. For example, fillOpacity refers to the fill opacity of the main shape. | [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object) | - | +| Attribute | Description | Type | Default Value | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | ------------- | +| 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 | +| fill | Fill color | string | `#fff` | +| stroke | Border color | string | `#000` | +| lineWidth | Border width | number | 1 | +| `${StyleProps}` | More options, refer to [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object) for details. For example, fillOpacity refers to the fill opacity of the main shape. | [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object) | - | ### Collapsed Style (collapsed) -| 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 | -| collapseFill | Fill color | string | `#fff` | -| collapsedStroke | Border color | string | `#000` | -| collapsedLineWidth | Border width | number | 1 | -| `collapsed${StyleProps}` | More graphic configurations, refer to [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object#drawing-properties). For example, fillOpacity refers to the fill opacity of the main shape. | [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object#drawing-properties) | - | +| 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 | +| collapseFill | Fill color | string | `#fff` | +| collapsedStroke | Border color | string | `#000` | +| collapsedLineWidth | Border width | number | 1 | +| `collapsed${StyleProps}` | More options, refer to [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object#drawing-properties). For example, fillOpacity refers to the fill opacity of the main shape. | [BaseStyleProps](https://g.antv.antgroup.com/en/api/basic/display-object#drawing-properties) | - | ### Collapsed Marker Style (collapsedMarker) diff --git a/packages/site/docs/api/elements/nodes/BaseNode.en.md b/packages/site/docs/api/elements/nodes/BaseNode.en.md index d47510e1269..b046853c99e 100644 --- a/packages/site/docs/api/elements/nodes/BaseNode.en.md +++ b/packages/site/docs/api/elements/nodes/BaseNode.en.md @@ -39,7 +39,7 @@ The following style will be explained sequentially based on atomic shapes: | stroke | Stroke color | string | `#000` | | lineWidth | Stroke width | number | string | 1 | | collapsed | Whether the current node/group is expanded | boolean | false | -| `${StyleProps}` | Additional shape options, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main graphic's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | +| `${StyleProps}` | Additional shape options, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For instance, `fillOpacity` indicates the transparency of the main shape's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | ### Label Style `label` @@ -50,7 +50,7 @@ The following style will be explained sequentially based on atomic shapes: | labelFill | Label text color | string | - | | labelFontSize | Label font size | number | 12 | | labelFontWeight | Label font weight | number | string | `normal` | -| labelPlacement | Label position relative to the main graphic of the node | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` | +| labelPlacement | Label position relative to the main shape of the node | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` | | labelOffsetX | Label offset in the x-axis direction | number | 0 | | labelOffsetY | Label offset in the y-axis direction | number | 0 | | labelWordWrap | Whether to enable word wrapping. When `labelWordWrap` is enabled, content exceeding `labelMaxWidth` automatically wraps | boolean | false | @@ -65,28 +65,28 @@ The following style will be explained sequentially based on atomic shapes: ### Halo Style `halo` -| Property | Description | Type | Default Value | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------- | -| halo | Whether to display a halo effect around the node | boolean | false | -| haloFill | Halo fill color | string | Same as the fill color of the main graphic | -| haloStroke | Halo stroke color | string | Same as the stroke color of the main graphic | -| haloLineWidth | Halo stroke width | number | 3 | -| `halo${StyleProps}` | Additional halo style options, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object). For instance, `haloFillOpacity` specifies the transparency of the halo's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | +| Property | Description | Type | Default Value | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------ | +| halo | Whether to display a halo effect around the node | boolean | false | +| haloFill | Halo fill color | string | Same as the fill color of the main shape | +| haloStroke | Halo stroke color | string | Same as the stroke color of the main shape | +| haloLineWidth | Halo stroke width | number | 3 | +| `halo${StyleProps}` | Additional halo style options, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object). For instance, `haloFillOpacity` specifies the transparency of the halo's fill color | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | ### Icon Style `icon` -| Property | Description | Type | Default Value | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| icon | Whether to display an icon on the node | boolean | true | -| iconSrc | Image source. Overrides `iconText` | string | - | -| iconWidth | Image width | number | Half of the main graphic's width | -| iconHeight | Icon height | number | Half of the main graphic's height | -| iconRadius | Icon corner radius | number | 0 | -| iconText | Icon text | string | - | -| iconFill | Icon text color | string | - | -| iconFontSize | Icon font size | number | 16 | -| iconFontWeight | Icon font weight | number | string | `normal` | -| `icon${StyleProps}` | Additional icon style options, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | +| Property | Description | Type | Default Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | +| icon | Whether to display an icon on the node | boolean | true | +| iconSrc | Image source. Overrides `iconText` | string | - | +| iconWidth | Image width | number | Half of the main shape's width | +| iconHeight | Icon height | number | Half of the main shape's height | +| iconRadius | Icon corner radius | number | 0 | +| iconText | Icon text | string | - | +| iconFill | Icon text color | string | - | +| iconFontSize | Icon font size | number | 16 | +| iconFontWeight | Icon font weight | number | string | `normal` | +| `icon${StyleProps}` | Additional icon style options, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) and [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image). For instance, `iconFontSize` specifies the font size for icon text | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | ### Badge Style `badges` @@ -101,7 +101,7 @@ The following style will be explained sequentially based on atomic shapes: | Property | Description | Type | Default Value | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -| placement | Badge position relative to the main graphic of the node. If unspecified, badges are placed clockwise starting from the top-right corner by default | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | - | +| placement | Badge position relative to the main shape of the node. If unspecified, badges are placed clockwise starting from the top-right corner by default | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | - | | offsetX | Horizontal offset for the badge | number | 0 | | offsetY | Vertical offset for the badge | number | 0 | | text | Text content for the badge | string | - | diff --git a/packages/site/docs/manual/core-concept/animation.en.md b/packages/site/docs/manual/core-concept/animation.en.md index 603cb64fe0f..6d07d3930a0 100644 --- a/packages/site/docs/manual/core-concept/animation.en.md +++ b/packages/site/docs/manual/core-concept/animation.en.md @@ -94,9 +94,9 @@ The animation configuration mentioned in the previous section actually used the Before writing an animation paradigm, it is necessary to understand the compositional structure of an element. For details, please refer to the [Element](/en/manual/core-concept/element#composition-node) section. ::: -The [Element](/en/manual/core-concept/element) section mentioned that elements in G6 are composed of one or more atomic graphics. Therefore, the animation of an element is essentially a combination of these atomic graphic animations. +The [Element](/en/manual/core-concept/element) section mentioned that elements in G6 are composed of one or more atomic graphics. Therefore, the animation of an element is essentially a combination of these atomic shape animations. -Thus, the animation paradigm is an array that describes the animation effects of each atomic graphic within the element. For the element itself, it is also a special composite shape and thus has basic shape attributes such as `x`, `y`, etc. +Thus, the animation paradigm is an array that describes the animation effects of each atomic shape within the element. For the element itself, it is also a special composite shape and thus has basic shape attributes such as `x`, `y`, etc. Therefore, you can directly write an animation paradigm for the element itself: diff --git a/packages/site/docs/manual/core-concept/element.en.md b/packages/site/docs/manual/core-concept/element.en.md index 881c1665a5f..a4cc5b6bc6f 100644 --- a/packages/site/docs/manual/core-concept/element.en.md +++ b/packages/site/docs/manual/core-concept/element.en.md @@ -7,7 +7,7 @@ order: 2 In G6, graph elements include **Nodes (Node)**, **Edges (Edge)**, and **Combos (Combo)**, which are the basic building blocks of a graph. -An element is composed of one or more atomic graphics, which are the smallest graphic units in G6, including [rectangles](https://g.antv.antgroup.com/en/api/basic/rect), [circles](https://g.antv.antgroup.com/en/api/basic/circle), [text](https://g.antv.antgroup.com/en/api/basic/text), [paths](https://g.antv.antgroup.com/en/api/basic/path), and so on. +An element is composed of one or more atomic graphics, which are the smallest shape units in G6, including [rectangles](https://g.antv.antgroup.com/en/api/basic/rect), [circles](https://g.antv.antgroup.com/en/api/basic/circle), [text](https://g.antv.antgroup.com/en/api/basic/text), [paths](https://g.antv.antgroup.com/en/api/basic/path), and so on. For example, a node can be composed of a rectangle and some text, and an edge can be composed of a path and some text. @@ -208,7 +208,7 @@ In G6, an edge is composed of the following parts: - `key` : The primary shape of the edge, representing the main form of the edge, such as a straight line, polyline, etc. - `label` : A text label, usually used to display the name or description of the edge - `arrow` : A text label, usually used to display the name or description of the edge -- `halo` : A graphic that displays a halo effect around the main shape +- `halo` : A shape that displays a halo effect around the main shape ### Register Edge @@ -298,7 +298,7 @@ The combos provided in G6 are composed of the following parts: - `key`: The main shape of the combo, representing the primary form of the combo. -- `halo`: The graphic that displays the halo effect around the main shape. +- `halo`: The shape that displays the halo effect around the main shape. - `label`: The text label, usually used to display the name or description of the combo. ### Register Combo