From 3534d4669b75ee8d899b81e95f5a4d2fa8d13b06 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 1 Dec 2023 17:44:49 +0800 Subject: [PATCH] docs: adjust docs of data (#5211) * docs: adjust docs of data * docs: update api docs --- packages/site/.dumirc.ts | 19 +- .../docs/apis/data/ComboDisplayModel.en.md | 240 ++------------- .../docs/apis/data/ComboDisplayModel.zh.md | 240 ++------------- packages/site/docs/apis/data/ComboModel.en.md | 75 +---- packages/site/docs/apis/data/ComboModel.zh.md | 75 +---- .../site/docs/apis/data/ComboUserModel.en.md | 77 +---- .../site/docs/apis/data/ComboUserModel.zh.md | 77 +---- .../site/docs/apis/data/CustomTransform.en.md | 2 +- .../site/docs/apis/data/CustomTransform.zh.md | 12 +- packages/site/docs/apis/data/DataIntro.en.md | 72 ++--- packages/site/docs/apis/data/DataIntro.zh.md | 74 ++--- .../docs/apis/data/EdgeDisplayModel.en.md | 212 ++------------ .../docs/apis/data/EdgeDisplayModel.zh.md | 212 ++------------ packages/site/docs/apis/data/EdgeModel.en.md | 110 +------ packages/site/docs/apis/data/EdgeModel.zh.md | 110 +------ .../site/docs/apis/data/EdgeUserModel.en.md | 115 ++------ .../site/docs/apis/data/EdgeUserModel.zh.md | 115 ++------ packages/site/docs/apis/data/GraphData.en.md | 40 ++- packages/site/docs/apis/data/GraphData.zh.md | 40 ++- .../docs/apis/data/NodeDisplayModel.en.md | 274 ++---------------- .../docs/apis/data/NodeDisplayModel.zh.md | 261 ++--------------- packages/site/docs/apis/data/NodeModel.en.md | 148 +--------- packages/site/docs/apis/data/NodeModel.zh.md | 148 +--------- .../site/docs/apis/data/NodeUserModel.en.md | 149 +--------- .../site/docs/apis/data/NodeUserModel.zh.md | 149 +--------- packages/site/docs/apis/data/TreeData.en.md | 53 +++- packages/site/docs/apis/data/TreeData.zh.md | 53 +++- .../docs/apis/data/WIP-CustomTransform.en.md | 4 - .../docs/apis/item/combo/ComboIntro.en.md | 22 ++ .../docs/apis/item/combo/ComboIntro.zh.md | 22 ++ .../site/docs/apis/item/edge/EdgeIntro.en.md | 22 +- .../site/docs/apis/item/edge/EdgeIntro.zh.md | 22 +- .../site/docs/apis/item/node/NodeIntro.en.md | 24 ++ .../site/docs/apis/item/node/NodeIntro.zh.md | 24 ++ .../site/docs/common/ComboShapeStyles.en.md | 18 +- .../site/docs/common/ComboShapeStyles.zh.md | 18 +- .../site/docs/common/ComboUserModel.en.md | 31 ++ .../site/docs/common/ComboUserModel.zh.md | 31 ++ .../site/docs/common/DataAnchorShapes.en.md | 24 ++ .../site/docs/common/DataAnchorShapes.zh.md | 24 ++ packages/site/docs/common/DataAnimates.en.md | 7 + packages/site/docs/common/DataAnimates.zh.md | 7 + packages/site/docs/common/DataAttrTips.en.md | 3 + packages/site/docs/common/DataAttrTips.zh.md | 3 + packages/site/docs/common/DataBadge.en.md | 17 ++ packages/site/docs/common/DataBadge.zh.md | 17 ++ .../site/docs/common/DataBadgePosition.en.md | 15 + .../site/docs/common/DataBadgePosition.zh.md | 15 + .../site/docs/common/DataBadgeShapes.en.md | 34 +++ .../site/docs/common/DataBadgeShapes.zh.md | 34 +++ packages/site/docs/common/DataBadges.en.md | 9 + packages/site/docs/common/DataBadges.zh.md | 9 + packages/site/docs/common/DataHaloShape.en.md | 9 + packages/site/docs/common/DataHaloShape.zh.md | 9 + packages/site/docs/common/DataID.en.md | 5 + packages/site/docs/common/DataID.zh.md | 5 + packages/site/docs/common/DataIcon.en.md | 22 ++ packages/site/docs/common/DataIcon.zh.md | 22 ++ packages/site/docs/common/DataIconShape.en.md | 28 ++ packages/site/docs/common/DataIconShape.zh.md | 28 ++ .../site/docs/common/DataInnerModelTips.en.md | 3 + .../site/docs/common/DataInnerModelTips.zh.md | 3 + .../common/DataLabelBackgroundShape.en.md | 21 ++ .../common/DataLabelBackgroundShape.zh.md | 21 ++ .../site/docs/common/DataLabelShape.en.md | 52 ++++ .../site/docs/common/DataLabelShape.zh.md | 52 ++++ .../site/docs/common/DataOtherShapes.en.md | 21 ++ .../site/docs/common/DataOtherShapes.zh.md | 21 ++ .../site/docs/common/EdgeShapeStyles.en.md | 8 +- .../site/docs/common/EdgeShapeStyles.zh.md | 8 +- packages/site/docs/common/EdgeUserModel.en.md | 37 +++ packages/site/docs/common/EdgeUserModel.zh.md | 37 +++ packages/site/docs/common/IAnimates.en.md | 42 +++ packages/site/docs/common/IAnimates.zh.md | 42 +++ packages/site/docs/common/LodLevels.en.md | 27 ++ packages/site/docs/common/LodLevels.zh.md | 27 ++ .../site/docs/common/NodeShapeStyles.en.md | 12 +- .../site/docs/common/NodeShapeStyles.zh.md | 4 +- packages/site/docs/common/NodeUserModel.en.md | 69 +++++ packages/site/docs/common/NodeUserModel.zh.md | 69 +++++ 80 files changed, 1626 insertions(+), 2686 deletions(-) delete mode 100644 packages/site/docs/apis/data/WIP-CustomTransform.en.md create mode 100644 packages/site/docs/common/ComboUserModel.en.md create mode 100644 packages/site/docs/common/ComboUserModel.zh.md create mode 100644 packages/site/docs/common/DataAnchorShapes.en.md create mode 100644 packages/site/docs/common/DataAnchorShapes.zh.md create mode 100644 packages/site/docs/common/DataAnimates.en.md create mode 100644 packages/site/docs/common/DataAnimates.zh.md create mode 100644 packages/site/docs/common/DataAttrTips.en.md create mode 100644 packages/site/docs/common/DataAttrTips.zh.md create mode 100644 packages/site/docs/common/DataBadge.en.md create mode 100644 packages/site/docs/common/DataBadge.zh.md create mode 100644 packages/site/docs/common/DataBadgePosition.en.md create mode 100644 packages/site/docs/common/DataBadgePosition.zh.md create mode 100644 packages/site/docs/common/DataBadgeShapes.en.md create mode 100644 packages/site/docs/common/DataBadgeShapes.zh.md create mode 100644 packages/site/docs/common/DataBadges.en.md create mode 100644 packages/site/docs/common/DataBadges.zh.md create mode 100644 packages/site/docs/common/DataHaloShape.en.md create mode 100644 packages/site/docs/common/DataHaloShape.zh.md create mode 100644 packages/site/docs/common/DataID.en.md create mode 100644 packages/site/docs/common/DataID.zh.md create mode 100644 packages/site/docs/common/DataIcon.en.md create mode 100644 packages/site/docs/common/DataIcon.zh.md create mode 100644 packages/site/docs/common/DataIconShape.en.md create mode 100644 packages/site/docs/common/DataIconShape.zh.md create mode 100644 packages/site/docs/common/DataInnerModelTips.en.md create mode 100644 packages/site/docs/common/DataInnerModelTips.zh.md create mode 100644 packages/site/docs/common/DataLabelBackgroundShape.en.md create mode 100644 packages/site/docs/common/DataLabelBackgroundShape.zh.md create mode 100644 packages/site/docs/common/DataLabelShape.en.md create mode 100644 packages/site/docs/common/DataLabelShape.zh.md create mode 100644 packages/site/docs/common/DataOtherShapes.en.md create mode 100644 packages/site/docs/common/DataOtherShapes.zh.md create mode 100644 packages/site/docs/common/EdgeUserModel.en.md create mode 100644 packages/site/docs/common/EdgeUserModel.zh.md create mode 100644 packages/site/docs/common/IAnimates.en.md create mode 100644 packages/site/docs/common/IAnimates.zh.md create mode 100644 packages/site/docs/common/LodLevels.en.md create mode 100644 packages/site/docs/common/LodLevels.zh.md create mode 100644 packages/site/docs/common/NodeUserModel.en.md create mode 100644 packages/site/docs/common/NodeUserModel.zh.md diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts index 9d7d3d6a53e..2a19e276125 100644 --- a/packages/site/.dumirc.ts +++ b/packages/site/.dumirc.ts @@ -159,27 +159,34 @@ export default defineConfig({ }, order: 2, }, + { + slug: 'apis/item', + title: { + zh: '元素', + en: 'Elements', + }, + }, { slug: 'apis/item/node', title: { - zh: '元素 - 节点', - en: 'Item - Node', + zh: '节点', + en: 'Node', }, order: 3, }, { slug: 'apis/item/edge', title: { - zh: '元素 - 边', - en: 'Item - Edge', + zh: '边', + en: 'Edge', }, order: 4, }, { slug: 'apis/item/combo', title: { - zh: '元素 - Combo', - en: 'Item - Combo', + zh: 'Combo', + en: 'Combo', }, order: 5, }, diff --git a/packages/site/docs/apis/data/ComboDisplayModel.en.md b/packages/site/docs/apis/data/ComboDisplayModel.en.md index 19238e51c00..f51fc7c604e 100644 --- a/packages/site/docs/apis/data/ComboDisplayModel.en.md +++ b/packages/site/docs/apis/data/ComboDisplayModel.en.md @@ -1,238 +1,44 @@ --- title: ComboDisplayModel -order: 12 +order: 11 --- -ComboDisplayModel（Combo Display/Rendering Data） is the result of mapping the ComboModel (inner model) through the mapper configuration specified on the graph instance ([specification.combo](../graph/Specification.en.md#combo)), and is only consumed for internal rendering. You won't consume it anywhere else. The data type inherits the ComboModel data type [`ComboModel`](./ComboModel.en.md) from the internal data flow and is extended as follows: +ComboDisplayModel is the rendering data of Combo, which is obtained by [ComboModel](./ComboModel.en.md) through [data mapping](./DataIntro.en.md#mappers). ComboDisplayModel can only be accessed by G6. -```typescript -interface ComboDisplayModel { - id: string | number; - data: ComboDisplayModelData; // extends ComboModelData -} -``` + -## id +## data Required -The unique ID of the Combo. The ID cannot be modified once the Combo is created. +The data in ComboDisplayModelData is the result of mapping the ComboModel data through the mapper configuration specified on the graph instance ([specification.combo](../graph/Specification.en.md#combo)). It should contain all the contents of ComboModel along with additional shape style configurations. -- **Required**: True; -- **Type**: `string|number` + -## data + -The data in ComboDisplayModelData is the result of mapping the ComboModel data through the mapper configuration specified on the graph instance ([specification.combo](../graph/Specification.en.md#combo)). It should contain all the contents of ComboModel along with additional graphic style configurations. + -- **Required**: True; -- **Type**: [`ComboDisplayModelData`](#combodisplaymodeldatalodlevels), extended from [`ComboModel`](./ComboModel.en.md#combomodeldatatype), with additional properties as described below: +### keyShape -### ComboDisplayModelData.lodLevels +**Type**: `ShapeStyle` -Specifies the zoom level divisions for the Combo. It is an array of zoom level range coefficients, representing the division of zoom levels. One of the levels should have `primary: true`, indicating that it has a level index of 0. The level indices decrease for levels with `zoomRange` less than the current level, and increase for levels with `zoomRange` greater than the current level. The level index corresponds to the `lod` value in the graphics configuration below. +The style configuration of the key shape of the Combo -- **Required**: False; -- **Type**: `LodLevel`[], where `LodLevel` is defined as follows: +> The key shape of `'circle-combo'` is ['circle'](/apis/shape/circle-style-props); the key shape of `'rect-combo'` is ['rect'](/apis/shape/rect-style-props). -| Name | Type | Description | -| :---------- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `zoomRange` | `[number, number]` | The zoom level range defined for this level. When the graph zoom level zoom >= zoomRange[0] && zoom < zoomRange[1], it indicates that the node is in this level | -| `primary` | `boolean` | Whether it is the primary level. If `true`, it means that the level number is 0. Levels with smaller this `zoomRange` values have decreasing level numbers, while levels with larger this `zoomRange` values have increasing level numbers. In the `NodeDisplayModelData.lodLevels` array, there should be only one level with `primary: true`. And the level number corresponds to the `lod` value in the shape style configurations below | + -### ComboDisplayModelData.animates + -Configuration of graphic animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). + -- **Required**: False; -- **Type**: `IAnimates`, defined as follows: + -```typescript -interface IAnimates { - buildIn?: IAnimate[]; // Animations when certain graphics are created in the combo - buildOut?: IAnimate[]; // Animations when certain graphics are destroyed in the combo - show?: IAnimate[]; // Animations when certain graphics transition from hidden to visible in the combo - hide?: IAnimate[]; // Animations when certain graphics transition from visible to hidden in the combo - update?: (IAnimate | IStateAnimate)[]; // Animations when certain graphics undergo data or state updates in the combo -} -``` + -In this, `IAnimate` is defined as follows: + -| Name | Type | Default | Description | -| :--------------------- | :--------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `IAnimate.fields` | `string[]` | `undefined` | The names of the graphic style properties related to this animation, for example `['fill', 'lineWidth']` | -| `IAnimate.shapeId` | `string` | `group` | The ID of the graphic on which the animation needs to be performed. If not specified, it represents the animation on the entire graphic group | -| `IAnimate.order?` | `number` | `0` | The order in which this animation is executed among `IAnimate[]`, allowing for sequential playback of multiple animations during one update | -| `IAnimate.duration?` | `number` | `500` | The duration of this animation, the smaller the value, the faster the animation speed | -| `IAnimate.iterations?` | `number` | `1` | The number of times this animation is executed, -1 represents looping execution | -| `IAnimate.easing?` | `string` | `'cubic-bezier(0.250, 0.460, 0.450, 0.940)'` | The easing function of this animation, the possible values can be referred to [MDN easing definition](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing) | - -`IStateAnimate` is defined as follows, which adds a field `states` specifying the states in which this animation is executed to `IAnimate`: - -```typescript -interface IStateAnimate extends IAnimate { - states: string[]; -} -``` - -### ComboDisplayModelData.keyShape - -The style configuration of the key shape of the Combo. The key shape of the Combo represents its primary form and is also used to calculate the incoming position of edges. - -- **Required**: False; -- **Type**: `ShapeStyle`, and the configuration options for different key shapes are different. For example, the key shape of `'circle-combo'` is `'circle'` (refer to [Circle Shape Style](../shape/CircleStyleProps.en.md)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](../shape/RectStyleProps.en.md)). - -### ComboDisplayModelData.haloShape - -In the built-in Combo and themes, `haloShape` refers to the halo effect displayed around the key shape (`keyShape`) of the Combo in the `active` state (usually triggered when the mouse hovers) and `selected` state (usually triggered when selected). In the logic of the built-in Combo, the type and color of the `haloShape` follow the key shape (`keyShape`). - -- **Required**: False; -- **Type**: `ShapeStyle`, where the type of haloShape follows the key shape (keyShape). The configuration options for different key shapes are different. For example, the key shape of `'circle-combo'` is `'circle'` (refer to [Circle Shape Style](../shape/CircleStyleProps.en.md)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](../shape/RectStyleProps.en.md)). - -### ComboDisplayModelData.labelShape - -The text shape of the Combo, supported by built-in Combo or custom Combo that inherits the built-in Combo (without overriding related content). - -- **Required**: False; -- **Type**: - -```typescript - TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo. - */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'ouside-top'| 'ouside-left' | 'ouside-right' | 'ouside-bottom'; - /** - * The offset of the text shape from the key shape (keyShape) in the x-direction. - */ - offsetX?: number; - /** - * The offset of the text shape from the key shape (keyShape) in the y-direction. - */ - offsetY?: number; - /** - * The offset of the text shape from the key shape (keyShape) in the z-direction. - */ - offsetZ?: number; - /** - * The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * The rotation angle of the text (in radians). - */ - angle?: number; - }; -``` - -The related shape style can be referred to as [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md)。 - -### ComboDisplayModelData.labelBackgroundShape - -The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape. - -- **Required**: False; -- **Type**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // The padding distance between the text and the background rectangle in all directions -}; -``` - -The related shape style can be referred to as RectStyleProps [`RectStyleProps`](../shape/RectStyleProps.en.md). - -### ComboDisplayModelData.badgeShapes - -The badges on the four sides of the Combo, where a single badge includes the Combo and background shape. `badgeShapes` configures multiple badges. - -- **Required**: False; -- **Type**: - -```typescript - { - /** - * The background color of the badge (applies to all badges, lower priority than the color setting of individual badges below) - */ - color?: string; - /** - * The color palette of the badge background, which means that the badges below will automatically take colors from this palette. - * Lower priority than the color setting of individual badges below. - */ - palette?: string[]; - /** - * The text color of the badge (applies to all badges, lower priority than the textColor setting of individual badges below) - */ - textColor?: string; - /** - * The style configuration of individual badges, which overrides the above configurations. - */ - [key: number]: ShapeStyle & { - /** - * The position of the badge, supported values are described below - */ - position?: IBadgePosition; - /** - * The background color of the badge - */ - color?: string; - /** - * The text color of the badge - */ - textColor?: string; - }; - } -``` - -`BadgePosition` can have the following values: - -| Value | Description | -| :-------------- | :------------------------------------------- | -| `'rightTop'` | Top right corner, recommended | -| `'right'` | Middle right, recommended | -| `'rightBottom'` | Bottom right corner, recommended | -| `'leftTop'` | Top left corner | -| `'left'` | Middle left | -| `'leftBottom'` | Bottom left corner | -| `'bottom'` | Middle bottom | -| `'top'` | Middle top | -| `'bottomRight'` | Bottom right corner, same as `'rightBottom'` | -| `'bottomLeft'` | Bottom left corner, same as `'leftBottom'` | -| `'topRight'` | Top right corner, same as `'rightTop'` | -| `'topLeft'` | Top left corner, same as `'leftTop'` | - -### ComboDisplayModelData.anchorShapes - -The circular shapes (anchor shapes) at the four sides of the Combo represent the entry points for connections. The anchorShapes configuration specifies multiple anchor shapes. - -- **Required**: False; -- **Type**: - -```typescript -// The outer layer configures the style of all anchor shapes (circles), with lower priority than the individual anchor shape configurations. -CircleStyleProps & { - // Individual anchor shape configurations, with higher priority than the outer CircleStyleProps. - [key: number]: CircleStyleProps & { - // The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape. - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -The style of the anchor shapes can be referred to as [CircleStyleProps](../shape/CircleStyleProps.en.md). - -### ComboDisplayModelData.otherShapes - -The xxShape(s) mentioned above are the predefined shapes in the G6 Combo specification. Other custom shapes in the Combo should be defined and configured in `otherShapes`. - -- **Required**: False; -- **Type**: - -```typescript -{ - // The key is the shape id, in the format of xxShape - // The value is the shape style configuration (which varies depending on the shape, see the relevant documentation for each shape), as well as the animation of the shape - [shapeId: string]: ShapeStyleProps; -} -``` - -The style configurations for different shapes can be referred to in the corresponding documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory. +:::info +The following attributes are inherited from [ComboModel](./ComboModel.en.md) +::: + + diff --git a/packages/site/docs/apis/data/ComboDisplayModel.zh.md b/packages/site/docs/apis/data/ComboDisplayModel.zh.md index d250f96313d..1a005290c12 100644 --- a/packages/site/docs/apis/data/ComboDisplayModel.zh.md +++ b/packages/site/docs/apis/data/ComboDisplayModel.zh.md @@ -1,238 +1,44 @@ --- title: ComboDisplayModel 渲染数据 -order: 12 +order: 11 --- -ComboDisplayModel（Combo 的渲染/展示数据） 由 ComboModel（内部流转数据）通过您配置在图实例上 mapper（[specification.combo](../graph/Specification.zh.md#combo)）映射后的结果，仅用于内部渲染时消费，您在其他任何地方不会消费它。数据类型继承自内部流转的 Combo 数据类型 [`ComboModel`](./ComboModel.zh.md)，扩展后定义如下： +ComboDisplayModel 为 Combo 的渲染数据，由 [ComboModel](./ComboModel.zh.md) 经过[数据映射](./DataIntro.zh.md#mappers-数据映射)后的结果，该数据仅能被 G6 访问。 -```typescript -interface ComboDisplayModel { - id: string | number; - data: ComboDisplayModelData; // 扩展了 ComboModelData -} -``` + -## id +## data 必须 -Combo 的唯一 ID，Combo 创建后，ID 不可被修改。 +基于 [ComboModel](./ComboModel.zh.md) 的内容额外加上了图形样式配置。 -- **是否必须**: 是； -- **类型**: `string|number` + -## data + -ComboDisplayModelData 中的数据已经是 ComboModel 通过 Graph 实例上配置的对应 mapper（[specification.combo](../graph/Specification.zh.md#combo)）映射后的结果，这里面应当存储所有 ComboModel 的内容，再额外加上许多的图形样式配置。 + -- **是否必须**: 是； -- **类型**: [`ComboDisplayModelData`](#combodisplaymodeldatalodlevels)，基于 [`ComboModel`](./ComboModel.zh.md#combomodeldatatype) 额外扩展内容如下文： +### keyShape -### ComboDisplayModelData.lodLevels +**类型**：`ShapeStyle` -对于该 Combo 而言，设定图缩放等级的划分方式。是一个缩放系数范围的数组，表示缩放等级的划分。其中有一项的 `primary` 应当为 `true`，代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。 +主图形的样式配置 -- **是否必须**: 否； -- **类型**: `LodLevel`[]，其中 `LodLevel` 如下表： +> `'circle-combo'` 的主图形是 ['circle'](/apis/shape/circle-style-props)；`'rect-combo'` 的主图形是 ['rect'](/apis/shape/rect-style-props) -| Name | Type | Description | -| :---------- | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `zoomRange` | `[number, number]` | 本层级所定义的图缩放等级范围，当图缩放等级 zoom >= zoomRange[0] && zoom < zoomRange[1] 时，表示在该层级下 | -| `primary` | `boolean` | 是否为主层级，若为 `true` 则代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。在 `ComboDisplayModelData.lodLevels` 中，应当只有一个层级为 `primary: true` | + -### ComboDisplayModelData.animates + -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates)。 + -- **是否必须**: 否； -- **类型**: `IAnimates`，定义如下： + -```typescript -interface IAnimates { - buildIn?: IAnimate[]; // Combo 中某些图形创建时的动画 - buildOut?: IAnimate[]; // Combo 中某些图形销毁时的动画 - show?: IAnimate[]; // Combo 中某些图形从隐藏变为显示时的动画 - hide?: IAnimate[]; // Combo 中某些图形从显示变为隐藏时的动画 - update?: (IAnimate | IStateAnimate)[]; // Combo 中某些图形在相关数据或状态更新时的动画 -} -``` + -其中，`IAnimate` 定义如下： + -| Name | Type | Default | Description | -| :--------------------- | :--------- | :------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | -| `IAnimate.fields` | `string[]` | `undefined` | 该动画相关的图形样式属性名称，例如 `['fill', 'lineWidth']` | -| `IAnimate.shapeId` | `string` | `group` | 该动画需要在哪个图形上执行，此处指定该图形的 ID。不指定则代表整个图形分组上的动画 | -| `IAnimate.order?` | `number` | `0` | 该动画在 `IAnimate[]` 中执行的顺序，借此可实现一次更新多个动画的顺序播放 | -| `IAnimate.duration?` | `number` | `500` | 该动画执行一次所使用的时间，该值越小，则动画速度越快 | -| `IAnimate.iterations?` | `number` | `1` | 该动画执行的次数，-1 代表循环执行 | -| `IAnimate.easing?` | `string` | `'cubic-bezier(0.250, 0.460, 0.450, 0.940)'` | 该动画的缓动函数，可以设置的值可参考 [MDN easing 定义](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing) | - -`IStateAnimate` 定义如下，即在 `IAnimate` 基础上增加了一个指定状态的字段 `states`，表示该动画在这些状态变更的时候执行： - -```typescript -interface IStateAnimate extends IAnimate { - states: string[]; -} -``` - -### ComboDisplayModelData.keyShape - -Combo 主图形的样式配置。Combo 的主图形表达了 Combo 的主要形状。还用于计算边的连入位置。 - -- **是否必须**: 否； -- **类型**: `ShapeStyle`，根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect-combo'` 的主图形是 `'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -### ComboDisplayModelData.haloShape - -在内置的 Combo 和主题中，`haloShape` 指的是 Combo 在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 - -- **是否必须**: 否； -- **类型**: `ShapeStyle`，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect-combo'` 的主图形是 `'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 - -### ComboDisplayModelData.labelShape - -Combo 的文本图形，内置 Combo 或继承内置 Combo（未复写相关内容）的自定义 Combo 均支持。 - -- **是否必须**: 否； -- **类型**: - -```typescript - TextStyleProps & { - /** - * 文本相对于 Combo 主图形 (keyShape) 的位置，可指定方位以及在 combo 的内部或外部 - */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'ouside-top'| 'ouside-left' | 'ouside-right' | 'ouside-bottom'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' - */ - maxWidth?: string | number; - /** - * 文本旋转角度（弧度制） - */ - angle?: number; - }; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。 - -### ComboDisplayModelData.labelBackgroundShape - -Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -- **是否必须**: 否； -- **类型**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 -}; -``` - -其中，参考矩形样式类型 [`RectStyleProps`](../shape/RectStyleProps.zh.md)。 - -### ComboDisplayModelData.badgeShapes - -Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。 - -- **是否必须**: 否； -- **类型**: - -```typescript - { - /** - * 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置） - */ - color?: string; - /** - * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。 - * 优先级低于下面单个徽标的 color 设置 - */ - palette?: string[]; - /** - * 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置） - */ - textColor?: string; - /** - * 单个徽标的样式配置，由县局高于上面的配置 - */ - [key: number]: ShapeStyle & { - /** - * 该徽标的位置，支持的取值见下文 - */ - position?: IBadgePosition; - /** - * 该徽标的背景色 - */ - color?: string; - /** - * 该徽标的文本色 - */ - textColor?: string; - }; - } -``` - -`BadgePosition` 取值如下： - -| Value | Description | -| :-------------- | :------------------------- | -| `'rightTop'` | 右上角，推荐 | -| `'right'` | 右侧中间，推荐 | -| `'rightBottom'` | 右下角，推荐 | -| `'leftTop'` | 左上角 | -| `'left'` | 左侧中间 | -| `'leftBottom'` | 左下角 | -| `'bottom'` | 下方中间 | -| `'top'` | 上方中间 | -| `'bottomRight'` | 右下角，同 `'rightBottom'` | -| `'bottomLeft'` | 左下角，同 `'leftBottom'` | -| `'topRight'` | 右上角，同 `'rightTop'` | -| `'topLeft'` | 左上角，同 `'leftTop'` | - -### ComboDisplayModelData.anchorShapes - -Combo 四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。 - -- **是否必须**: 否； -- **类型**: - -```typescript -// 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置 -CircleStyleProps & { - // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - [key: number]: CircleStyleProps & { - // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -其中，相关的图形样式参考 [`CircleStyleProps` 圆形图形样式](../shape/CircleStyleProps.zh.md)。 - -### ComboDisplayModelData.otherShapes - -上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -} -``` - -其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 +:::info{title=提示} +下列属性继承自 [ComboModel](./ComboModel.zh.md) +::: + + diff --git a/packages/site/docs/apis/data/ComboModel.en.md b/packages/site/docs/apis/data/ComboModel.en.md index 796077661c9..80218751a34 100644 --- a/packages/site/docs/apis/data/ComboModel.en.md +++ b/packages/site/docs/apis/data/ComboModel.en.md @@ -1,77 +1,16 @@ --- title: ComboModel -order: 8 +order: 10 --- -ComboModel is the combo data that is internally circulated, which is calculated from `ComboUserModel` through transformations on the graph instance. The data you consume anywhere later is based on this data. Each item in Combo inherits from [`ComboUserModel`](./ComboUserModel.en.md) and is defined as follows after extension: +ComboModel is the internal combo data, which is obtained by [ComboUserModel](./ComboUserModel.en.md) through [transforms](./DataIntro.en.md#transforms). -```typescript -interface ComboModel { - id: string | number; - data: ComboModelData; // = ComboModelData -} -``` + -## id + -The unique ID of the combo. After the combo is created, the ID cannot be modified. +## data Required -- **Required**: True; -- **Type**: `string|number` + -## data - -The data in InnerModelData has been generated from UserModelData through a series of transform functions on the graph instance. The business data may have been transformed, filtered, and merged. - -- **Required**: True; -- **Type**: `ComboModelData`, the definition is the same as [`ComboUserModel`](./ComboUserModel.en.md#ComboModelDatatype), as follows: - -### ComboModelData.type - -The rendering type of the combo, which can be a combo type registered on the graph class. The built-in and default registered types are `'circle-combo'` and `'rect-combo'`. The default is `'circle-combo'`. - -- **Required**: False; -- **Type**: `string`； - -### ComboModelData.visible - -Whether the combo is displayed by default. - -- **Required**: False; -- **Type**: `boolean`； - -### ComboModelData.color - -The theme color of the key shape (`keyShape`) of the combo, with a value in hexadecimal string format. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including keyShape and various graphic styles. - -- **Required**: False; -- **Type**: `string`； - -### ComboModelData.label - -The text content of the `labelShape` of the combo. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including the `text` value of `labelShape` or other graphic styles. - -- **Required**: False; -- **Type**: `string`； - -### ComboModelData.icon - -The configuration of the icon on the combo. The built-in combo's icon is drawn after the text. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including the graphic style of the iconShape. - -- **Required**: False; -- **Type**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // Required when type is 'text' - text?: string, // Required when type is 'icon' -} -``` - -### ComboModelData.parentId - -The ID of the parent combo to which the combo belongs. `undefined` means it is a root. - -- **Required**: False; -- **Type**: `string | number`； + diff --git a/packages/site/docs/apis/data/ComboModel.zh.md b/packages/site/docs/apis/data/ComboModel.zh.md index ea2b5b9c735..708da8602b5 100644 --- a/packages/site/docs/apis/data/ComboModel.zh.md +++ b/packages/site/docs/apis/data/ComboModel.zh.md @@ -1,77 +1,16 @@ --- title: ComboModel 内部数据 -order: 8 +order: 10 --- -ComboModel 为内部流转的 combo 数据，由 ComboUserModel 经过皮质在图实例上的 transforms 计算而得。后续您在任意地方消费的都是这一份数据。每一项 Combo 的类型继承自 [`ComboUserModel`](./ComboUserModel.zh.md)，扩展后定义如下： +ComboModel 为内部流转的 combo 数据，由 [ComboUserModel](./ComboUserModel.zh.md) 经过[数据转换](./DataIntro.zh.md#transforms-数据转换)后得到。 -```typescript -interface ComboModel { - id: string | number; - data: ComboModelData; // = ComboModelData -} -``` + -## id + -节点的唯一 ID，节点创建后，ID 不可被修改。 +## data 必须 -- **是否必须**: 是； -- **类型**: `string|number` + -## data - -InnerModelData 中的数据已经是 UserModelData 通过 Graph 实例的一系列 transform 函数生成的结果，业务数据可能已经被转换、过滤、合并。 - -- **是否必须**: 是； -- **类型**: `ComboModelData`，同 [`ComboUserModel`](./ComboUserModel.zh.md#ComboModelDatatype) 定义如下： - -### ComboModelData.type - -Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。默认为 `'circle-combo'`。 - -- **是否必须**：否; -- **类型**： `string`； - -### ComboModelData.visible - -Combo 是否默认展示出来。 - -- **是否必须**：否; -- **类型**： `boolean`； - -### ComboModelData.color - -该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 - -- **是否必须**：否; -- **类型**： `string`； - -### ComboModelData.label - -Combo `labelShape` 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 `labelShape` 的 `text` 值或其他图形样式。 - -- **是否必须**：否; -- **类型**： `string`； - -### ComboModelData.icon - -Combo 上的 icon 配置。内置 Combo 的 icon 绘制在文本后方。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 iconShape 的图形样式。 - -- **是否必须**：否; -- **类型**： - -```typescript -{ - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -} -``` - -### ComboModelData.parentId - -在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。`undefined` 表示当前 Combo 是一个根。 - -- **是否必须**：否; -- **类型**： `string | number`； + diff --git a/packages/site/docs/apis/data/ComboUserModel.en.md b/packages/site/docs/apis/data/ComboUserModel.en.md index 5fa9efa8967..4e4be98d311 100644 --- a/packages/site/docs/apis/data/ComboUserModel.en.md +++ b/packages/site/docs/apis/data/ComboUserModel.en.md @@ -1,77 +1,22 @@ --- title: ComboUserModel -order: 5 +order: 9 --- -Data Type Definitions for Each Combo model is: +The `combos` part of the user input data. -```typescript -interface ComboUserModel { - id: string | number; - data: NodeUserModelData; -} -``` - -## id - -The unique ID of the combo. Once the combo is created, the ID cannot be changed. - -- **Required**: True; -- **Type**: `string|number`; - -## data - -The data of the combo, excluding the ID. It is recommended to store business data. If data conversion is needed, it can be done through the transform function configured in the Graph instance, see [Specification.transforms](../graph/Specification.en.md#transforms). The converted data becomes the internal data that circulates within the graph. All subsequent accesses will be based on this internal data. For rendering-related data, it can be mapped using the combo mapper of the Graph instance, see [Specification.combo](../graph/Specification.en.md#combo). The input of this mapper is the internal data, and the generated display data is only consumed by the renderer. Users will not obtain it anywhere. - -- **Required**: True; -- **Type**: [`ComboUserModelData`](#combousermodeldatatype); - -### ComboUserModelData.type - -Type: string The rendering type of the Combo, which can be a Combo type that has been registered with the graph class. Built-in and default registered types include `'circle-combo'`, `'rect-combo'`. - -- Required: False; -- Type: `string`; - -### ComboUserModelData.visible +An example of a data item: -Whether the Combo is displayed by default. - -- Required: False; -- Type: `boolean`; - -### ComboUserModelData.color - -The theme color of the main graphic (keyShape) of the Combo, represented as a hexadecimal string. This is provided for simple configuration convenience. More style configurations should be made in the Combo mapper of the Graph instance, where keyShape and various graphics styles can be configured. - -- Required: False; -- Type: `string`; - -### ComboUserModelData.label - -The text content of the Combo labelShape. This is provided for simple configuration convenience. More style configurations should be made in the Combo mapper of the Graph instance, where the text value or other graphic styles of the labelShape can be configured. - -- Required: False; -- Type: `string`; - -### ComboUserModelData.icon - -The icon configuration on the Combo. Built-in Combo icons are drawn after the text. This is provided for simple configuration convenience. More style configurations should be made in the iconShape graphic style of the Combo mapper of the Graph instance. +```json +{ "id": "combo-1", "data": {} } +``` -- Required: False; -- Type: + -```typescript -{ - type: 'text' | 'icon', - img?: string, // Required when type is 'text' - text?: string, // Required when type is 'icon' -} -``` +## data Required -### ComboUserModelData.parentId +The Combo data -Represents the id of the parent Combo that the Combo belongs to on a graph with Combos. + -- Required: False; -- Type: `string | number`; + diff --git a/packages/site/docs/apis/data/ComboUserModel.zh.md b/packages/site/docs/apis/data/ComboUserModel.zh.md index 84241cd7347..b797a9f6864 100644 --- a/packages/site/docs/apis/data/ComboUserModel.zh.md +++ b/packages/site/docs/apis/data/ComboUserModel.zh.md @@ -1,77 +1,22 @@ --- title: ComboUserModel 输入数据 -order: 5 +order: 9 --- -用户输入数据中，每一项 Combo 数据类型说明如下。 +用户输入数据中的 `combos` 部分内容。 -```typescript -interface ComboUserModel { - id: string | number; - data: NodeUserModelData; -} -``` - -## id - -Combo 的唯一 ID，Combo 创建后，ID 不可被修改。 - -- **是否必须**: 是； -- **类型**: `string|number` - -## data - -Combo 除 ID 以外的的数据，建议存放业务数据。若需要进行数据转换，可通过 Graph 实例的 transform 配置转换函数，见 [Specification.transforms](../graph/Specification.zh.md#transforms)。转换后的数据成为内部流通的数据 Inner Data，后续所有地方获取的都是这份内部数据。与渲染有关的可以通过 Graph 实例的 combo mapper 进行映射，见 [Specification.combo](../graph/Specification.zh.md#combo)，该 mapper 的输入是 Inner Data，生成的结果 Display Data 只交给渲染器消费，用户不会在任何地方获得。 - -- **是否必须**: 是； -- **类型**: [`ComboUserModelData`](#combousermodeldatatype)，详细见下文 - -### ComboUserModelData.type - -Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。 - -- **是否必须**：`否`； -- **类型**： `string`； - -### ComboUserModelData.visible +下面是一个数据项实例： -Combo 是否默认展示出来。 - -- **是否必须**：`否`； -- **类型**： `boolean`； - -### ComboUserModelData.color - -该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 - -- **是否必须**：`否`； -- **类型**： `string`； - -### ComboUserModelData.label - -Combo labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 labelShape 的 text 值或其他图形样式。 - -- **是否必须**：`否`； -- **类型**： `string`； - -### ComboUserModelData.icon - -Combo 上的 icon 配置。内置 Combo 的 icon 绘制在文本后方。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 iconShape 的图形样式。 +```json +{ "id": "combo-1", "data": {} } +``` -- **是否必须**：`否`； -- **类型**： + -```typescript -{ - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -} -``` +## data 必须 -### ComboUserModelData.parentId +Combo 数据 -在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。 + -- **是否必须**：`否`； -- **类型**： `string | number`； + diff --git a/packages/site/docs/apis/data/CustomTransform.en.md b/packages/site/docs/apis/data/CustomTransform.en.md index 00f539b1f99..c74fd3d008b 100644 --- a/packages/site/docs/apis/data/CustomTransform.en.md +++ b/packages/site/docs/apis/data/CustomTransform.en.md @@ -1,6 +1,6 @@ --- title: Custom Data Processor -order: 13 +order: 12 --- > Before proceeding with a custom data processor, please ensure you are familiar with the G6 data flow and structure. Related content can be found in the [Data Introduction Document](./DataIntro.en.md). diff --git a/packages/site/docs/apis/data/CustomTransform.zh.md b/packages/site/docs/apis/data/CustomTransform.zh.md index ab9c848db8e..8b0755fdc08 100644 --- a/packages/site/docs/apis/data/CustomTransform.zh.md +++ b/packages/site/docs/apis/data/CustomTransform.zh.md @@ -1,15 +1,15 @@ --- title: 自定义数据处理器 -order: 13 +order: 12 --- -> 在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考[数据介绍文档](./DataIntro.zh.md)。 +> 在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考[数据介绍文档](./DataIntro.zh.md) -自定义数据处理器涉及以下三个主要步骤：定义、注册和使用。[自定义数据处理器 DEMO](/zh/examples/feature/features/#themeSwitch)。 +自定义数据处理器涉及以下三个主要步骤：定义、注册和使用。[自定义数据处理器 DEMO](/zh/examples/feature/features/#themeSwitch) ## 定义 -自定义数据处理器本质上是一个函数，它负责将用户数据 (user data) 转换为 G6 内部可以理解和处理的格式 (inner data)。 +自定义数据处理器本质上是一个函数，它负责将用户数据 (user data) 转换为 G6 内部可以理解和处理的格式 (inner data) **类型**：`CustomDataTransformFn` @@ -39,7 +39,7 @@ type GraphDataChanges = { }; ``` -其中，输入数据类型参考 [NodeUserModel 输入数据](./NodeUserModel.zh.md)，[EdgeUserModel 输入数据](./EdgeUserModel.zh.md) 和 [ComboUserModel 输入数据](./ComboUserModel.zh.md)。 +其中，输入数据类型参考 [NodeUserModel 输入数据](./NodeUserModel.zh.md)，[EdgeUserModel 输入数据](./EdgeUserModel.zh.md) 和 [ComboUserModel 输入数据](./ComboUserModel.zh.md) 请确保您的处理器返回的数据严格遵守 `GraphDataChanges` 类型定义，以保证处理器能顺利嵌入 G6 的数据处理流程中。 @@ -62,7 +62,7 @@ const ExtGraph = extend(BaseGraph, { 注册完成后，您可以在图形实例化或 API 调用中使用自定义数据处理器。 -**类型**: `TransformsConfig` +**类型**：`TransformsConfig` ```typescript // 数据生命周期阶段 diff --git a/packages/site/docs/apis/data/DataIntro.en.md b/packages/site/docs/apis/data/DataIntro.en.md index db189e8f8cb..f5cdea05ee0 100644 --- a/packages/site/docs/apis/data/DataIntro.en.md +++ b/packages/site/docs/apis/data/DataIntro.en.md @@ -1,67 +1,63 @@ --- -title: Data Intro +title: Data Introduction order: 0 --- -In G6 v5, to better manage data isolation and control data mapping, the data flow is defined as follows: +In G6 5.0, in order to better isolate data and control data mapping, the new specification for data flow is as follows: -在 G6 v5 中，为了更好地做好数据隔离，控制数据映射，全新定义规范数据流如下： - -【User Data】 - _Transforms_ -> 【Inner Data】 - _Mappers_ -> 【Display Data】 - -Now let's discuss each stage of data and the transformation process. +data process ### User Data -The data type is [`GraphData`](./GraphData.zh.md) or [`TreeData`](./TreeData.zh.md). User data is the original data provided by the user, which can be data from the business domain. It is a collection of nodes, edges, and combos. This data can come from external data sources or be generated by user interaction. +The original data input by the user is a collection of nodes, edges, and combos, which can be graph data [GraphData](./GraphData.en.md) or tree data [TreeData](./TreeData.en.md). -There are several ways to input user data: +There are three ways to input data: 1. **Passing configuration when instantiating the graph** The graph is automatically rendered after instantiation. -```javascript +```js const data = { - nodes: [...], - edges: [...], - combos: [...] - } + nodes: [], // Node collection + edges: [], // Edge collection + combos: [], // Combo collection +}; const graph = new Graph({ // ... other configurations - data -}) + data, +}); ``` 2. **Calling API to input data** The graph reads and renders the data. -```javascript +```js graph.read(data); ``` 3. **Calling API to update data** -- Updating the entire data [changeData](../graph//Graph.zh.md#changedata) +- Updating the entire data [changeData](../graph/Graph.en.md#changedata) -```javascript +```js graph.changeData(data); ``` -- Adding partial data [addData](../graph//Graph.zh.md#adddata) +- Adding data [addData](../graph/Graph.en.md#adddata) -```javascript +```js graph.addData('node', [ - { id: 'newnode-1', data: {} }, - { id: 'newnode-2', data: {} }, + { id: 'node-1', data: {} }, + { id: 'node-2', data: {} }, ]); -graph.addData('edge', [{ id: 'newedge-1', source: 'newnode-2', target: 'newnode-1', data: {} }]); +graph.addData('edge', [{ id: 'edge-1', source: 'node-2', target: 'node-1', data: {} }]); ``` -- Updating existing data [updateData](../graph//Graph.zh.md#updatedata) +- Updating existing data [updateData](../graph//Graph.en.md#updatedata) -```javascript +```js const nodes = [ { id: 'node-1', data: { xx: 1 } }, { id: 'node-2', data: { xx: 2 } }, @@ -70,28 +66,36 @@ const nodes = [ graph.updateData('node', nodes); ``` -- Removing partial data [removeData](../graph//Graph.zh.md#removedata) +- Removing partial data [removeData](../graph//Graph.en.md#removedata) -```javascript +```js graph.removeData('node', ['node-1', 'node-2']); ``` ### Transforms -Transforms are functional modules used to transform and process user input data. They can perform various operations such as attribute field transformation, data filtering, and data aggregation. Transformations can be customized based on specific requirements to convert input data into internal data formats suitable for subsequent processing. +Transforms are used to transform and process user data, such as attribute field transformation, data filtering, data aggregation, etc. Transformers can be customized according to actual needs to convert input data into internal data formats suitable for subsequent processing. -Transformers are configured using the `transforms` field in the graph configuration. The `transforms` field accepts an array of transformer configurations. When G6 reads user data, it executes the data transformations in the order specified in `transforms`, with the output of the previous transformer being the input of the next one. [A DEMO for Transforms](/en/examples/feature/features/#rendererSwitch). +Use the `transforms` field in the graph configuration to configure the transformers. `transforms` accepts an array of transformers. When G6 reads user data, it will execute data transformation according to the order of transformers in `transforms`, and the result of the previous transformer will be used as the input of the next transformer. [Transforms DEMO](/en/examples/feature/features/#rendererSwitch). ### Inner Data -Inner data is the data generated after the transformation stage in the Transforms. It is the data that has been processed and transformed by transformers. Inner data can be used as input for subsequent data mapping or for other data processing and operations. After G6 reads user data, any data fetched or modified is done on the inner data. +The inner data is the data obtained after **data transformation**, which is used as the input for subsequent data mapping, and is also used for other data processing and operations. + +:::warning +After G6 reads user data, subsequent users will get and modify the inner data. +::: ### Mappers -Mappers are used to map the inner data to specific visual channels. They map the internal data to specific node styles, edge styles, labels, and other visual attributes based on predefined rules and configurations. Mappers support JSON-based configurations as well as function-based configurations. +Mappers are used to map internal data to visual channels. They map internal data to specific node styles, edge styles, labels, and other visual properties according to predefined rules and configurations. Mappers support JSON format configuration as well as functional configuration. -Mappers are configured using the `node`, `edge`, or `combo` fields in the graph configuration. The types of mappers can be found in [specification.node](../graph/Specification.en.md#node), [specification.edge](../graph/Specification.en.md#edge), [specification.combo](../graph/Specification.en.md#combo). [A Demo for Mappers](/en/examples/feature/features/#lodLevels). +Users configure the node, edge, and combo mapping rules through the [node](../graph/Specification.en.md#node), [edge](../graph/Specification.en.md#edge), and [combo](../graph/Specification.en.md#combo) properties in the graph configuration. [Mappers DEMO](/en/examples/feature/features/#lodLevels) ### Display Data -Display data is the final data generated after being processed by the data mappers. You will not directly access this data anywhere. It includes node positions, styles for various graphics, and other information needed for final rendering and display of the graph. +The final data used for rendering generated by Mappers mapping, which contains the position of the node, the style of each shape, etc., is used for the final graph rendering and display. + +:::warning +Only G6 can access the rendering data, and users cannot directly get and modify the rendering data. +::: diff --git a/packages/site/docs/apis/data/DataIntro.zh.md b/packages/site/docs/apis/data/DataIntro.zh.md index 52f45fbe65e..fc4cee15f28 100644 --- a/packages/site/docs/apis/data/DataIntro.zh.md +++ b/packages/site/docs/apis/data/DataIntro.zh.md @@ -3,39 +3,37 @@ title: 数据使用简介 order: 0 --- -在 G6 v5 中，为了更好地做好数据隔离，控制数据映射，全新定义规范数据流如下： +在 G6 5.0 中，为了更好地做好数据隔离，控制数据映射，全新定义规范数据流如下： -【User Data】 - _Transforms_ -> 【Inner Data】 - _Mappers_ -> 【Display Data】 - -以下介绍各个阶段的数据以及转换阶段。 +data process ### User Data 用户输入数据 -数据类型为 [`GraphData`](./GraphData.zh.md) 或 [`TreeData`](./TreeData.zh.md)。用户输入数据是由用户提供的原始数据，可以是来自业务的数据。是节点、边、Combo 的集合。这些数据可能来自外部数据源，或者是用户通过交互操作生成的。 +用户输入的原始数据，是节点、边、群组的集合，可以是图数据[GraphData](./GraphData.zh.md)或树数据[TreeData](./TreeData.zh.md)。 -用户数据输入的方式有： +数据输入的方式有： -1. **图实例化时传入配置** +1. **图实例化时传入** 实例化完成后自动渲染图。 -```javascript +```js const data = { - nodes: [...], - edges: [...], - combos: [...] - } + nodes: [], // 节点集 + edges: [], // 边集 + combos: [], // 群组集 +}; const graph = new Graph({ // ... 其他配置 - data -}) + data, +}); ``` 2. **调用 API 传入数据** 图实例读取并渲染数据。 -```javascript +```js graph.read(data); ``` @@ -43,23 +41,23 @@ graph.read(data); - 更新全量数据 [changeData](../graph//Graph.zh.md#changedata) -```javascript +```js graph.changeData(data); ``` -- 新增部分数据 [addData](../graph//Graph.zh.md#adddata) +- 新增数据 [addData](../graph//Graph.zh.md#adddata) -```javascript +```js graph.addData('node', [ - { id: 'newnode-1', data: {} }, - { id: 'newnode-2', data: {} }, + { id: 'node-1', data: {} }, + { id: 'node-2', data: {} }, ]); -graph.addData('edge', [{ id: 'newedge-1', source: 'newnode-2', target: 'newnode-1', data: {} }]); +graph.addData('edge', [{ id: 'edge-1', source: 'node-2', target: 'node-1', data: {} }]); ``` -- 更新部分已有数据 [updateData](../graph//Graph.zh.md#updatedata) +- 更新部分已有数据 [updateData](../graph/Graph.zh.md#updatedata) -```javascript +```js const nodes = [ { id: 'node-1', data: { xx: 1 } }, { id: 'node-2', data: { xx: 2 } }, @@ -68,28 +66,36 @@ const nodes = [ graph.updateData('node', nodes); ``` -- 删除部分数据 [removeData](../graph//Graph.zh.md#removedata) +- 删除部分数据 [removeData](../graph/Graph.zh.md#removedata) -```javascript +```js graph.removeData('node', ['node-1', 'node-2']); ``` -### Transforms 数据转换器 +### Transforms 数据转换 + +对用户数据进行转换和处理，例如属性字段转换、数据过滤、数据聚合等。转换器可以根据实际需求进行自定义配置，以便将输入数据转换为适合后续处理的内部数据格式。 -数据转换器是用于对用户输入数据进行转换和处理的功能模块。它们可以执行各种操作，例如属性字段转换、数据过滤、数据聚合等。转换器可以根据实际需求进行自定义配置，以便将输入数据转换为适合后续处理的内部数据格式。 +使用图配置中的 `transforms` 字段来配置转换器。`transforms` 接受转换器数组，G6 在读取用户数据时，将按照 `transforms` 中转换器的顺序执行数据转换，前一个转换器的结果将作为下一个转换器的输入。[Transforms DEMO](/examples/feature/features/#rendererSwitch). -使用图配置中的 `transforms` 字段配置的各种转换器。`transforms` 接受的是转换器配置数组，G6 在读取用户数据时，将按照 `transforms` 中转换器的顺序执行数据转换，前一个转换器的结果将作为下一个转换器的输入 [Transforms DEMO](/en/examples/feature/features/#rendererSwitch). +### Inner Data 内部数据 -### Inner Data 内部流转数据 +内部数据是在**数据转换**后得到的数据，用作后续数据映射的输入，也用于其他数据处理和操作。 -内部流转数据是在 Transforms 转换阶段后生成的数据，它是经过转换器处理和转换后的数据。内部流转数据可以作为后续数据映射的输入，也可以用于其他数据处理和操作。在 G6 读取用户数据后，后续用户获取和修改的都是内部流转数据。 +:::warning{title=注意} +在 G6 读取用户数据后，后续用户获取和修改的都是内部数据 +::: -### Mappers 数据映射器 +### Mappers 数据映射 -数据映射器是用于将内部流转数据映射到具体的视觉通道上。它们根据预定义的规则和配置，将内部数据映射到特定的节点样式、边样式、标签等可视化属性上。数据映射器支持 JSON 格式的配置，也支持函数式的配置。 +Mappers 用于将内部数据映射到视觉通道。它们根据预定义的规则和配置，将内部数据映射到特定的节点样式、边样式、标签等可视化属性上。Mappers 支持 JSON 格式的配置，也支持函数式的配置。 -使用图配置中的 `node`，`edge`，或 `combo`，类型见：[specification.node](../graph/Specification.zh.md#node), [specification.edge](../graph/Specification.zh.md#edge), [specification.combo](../graph/Specification.zh.md#combo)。 [Mappers DEMO](/zh/examples/feature/features/#lodLevels). +用户通过图配置中的 [node](../graph/Specification.zh.md#node)、[edge](../graph/Specification.zh.md#edge)、[combo](../graph/Specification.zh.md#combo) 属性来配置节点、边、群组的映射规则。[Mappers DEMO](/zh/examples/feature/features/#lodLevels) ### Display Data 渲染数据 -渲染数据是经过数据映射器（Mappers）处理后生成的最终用于渲染的数据，您将不会在任何地方读取到这份数据。它包含了节点的位置、各个图形的样式等，用于最终的图形渲染和展示。 +经过 Mappers 映射生成的最终用于渲染的数据，它包含了节点的位置、各个图形的样式等，用于最终的图形渲染和展示。 + +:::warning{title=注意} +只有 G6 可以访问渲染数据，用户无法直接获取和修改渲染数据 +::: diff --git a/packages/site/docs/apis/data/EdgeDisplayModel.en.md b/packages/site/docs/apis/data/EdgeDisplayModel.en.md index 6264e5a2c9b..15a5f4146c7 100644 --- a/packages/site/docs/apis/data/EdgeDisplayModel.en.md +++ b/packages/site/docs/apis/data/EdgeDisplayModel.en.md @@ -1,216 +1,52 @@ --- title: EdgeDisplayModel -order: 11 +order: 8 --- -EdgeDisplayModel (edge rendering/display data) is the result of mapping the EdgeModel (internal flow data) configured on the graph instance using the mapper ([specification.edge](../graph/Specification.en.md#edge)). It is only consumed internally for rendering and will not be consumed anywhere else. The data type inherits from the [`EdgeModel`](./EdgeModel.en.md) data type [`EdgeModel`](./EdgeModel.en.md) and is extended as follows: +EdgeDisplayModel is the rendering data of Edge, which is obtained by [EdgeModel](./EdgeModel.en.md) through [data mapping](./DataIntro.en.md#mappers). EdgeDisplayModel can only be accessed by G6. -```typescript -interface EdgeDisplayModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeDisplayModelData; // extends EdgeModelData -} -``` + -## id +## source Required -The unique ID of the edge. Once the edge is created, the ID cannot be modified. - -- **Required**: True; -- **Type**: `string|number` - -## source +**Type**: `string | number` The ID of the source node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. -- **Required**: True; -- **Type**: `string|number` +## target Required -## target +**Type**: `string | number` The ID of the target node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. -- **Required**: True; -- **Type**: `string|number` - -## data - -The data in EdgeDisplayModelData is the result of the EdgeModel being mapped through the mapper ([specification.edge](../graph/Specification.en.md#edge)) configured on the Graph instance. It should store all the contents of the EdgeModel, as well as many graphic style configurations. +## data Required -- **Required**: True; -- **Type**: [`EdgeDisplayModelData`](#EdgeDisplayModelDatalodlevels)，extended from [`EdgeModel`](./EdgeModel.en.md#edgemodeldatatype) with additional content as described below: +The data in EdgeDisplayModelData is the result of the EdgeModel being mapped through the mapper ([specification.edge](../graph/Specification.en.md#edge)) configured on the Graph instance. It should store all the contents of the EdgeModel, as well as many shape style configurations. -### EdgeDisplayModelData.lodLevels + -Specifies how the graph zoom levels are divided for this edge. It is an array of zoom level ranges, representing the division of zoom levels. One of them should have `primary` set to `true`, indicating that the index of this level is 0. lodLevels with `zoomRange` smaller than the current zoom level should have decreasing indices, while those with `zoomRange` larger than the current zoom level should have increasing indices. The index corresponds to the value of `lod` in the graphic configuration below. + -- **Required**: False; -- **Type**: `LodLevel`[], where `LodLevel` is as follows: + -| Name | Type | Description | -| :---------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `zoomRange` | `[number, number]` | The range of zoom levels defined for this level. When the graph zoom level zoom >= zoomRange[0] && zoom < zoomRange[1], it means it is at this level | -| `primary` | `boolean` | Whether it is the primary level. If `true`, it means the index of this level is 0. The indices of levels smaller than the current level decrease, while those larger than the current level increase. There should be only one level with `primary: true` in `EdgeDisplayModelData.lodLevels`. The index corresponds to the value of `lod` in the graphic configuration below | +### keyShape -### EdgeDisplayModelData.animates - -Animations for the appearance, disappearance, display, hiding, and updating of various graphics in the edge. Supports sequential execution of multiple animations in one update (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). - -- **Required**: False; -- **Type**: `IAnimates`, defined as follows: +The style configuration of the key shape of the edge. The key shape of the edge is the overall path shape of the edge. -```typescript -interface IAnimates { - buildIn?: IAnimate[]; // Animation when certain graphics in the edge are created - buildOut?: IAnimate[]; // Animation when certain graphics in the edge are destroyed - show?: IAnimate[]; // Animation when certain graphics in the edge transition from hidden to visible - hide?: IAnimate[]; // Animation when certain graphics in the edge transition from visible to hidden - update?: (IAnimate | IStateAnimate)[]; // Animation when certain graphics in the edge are updated based on related data or states -} -``` +**Type**: `ShapeStyle`, the shape style configuration of the key shape depends on the different main shapes. For example, the key shape of `'line-edge'` is `'line'`, please refer to [LineStyleProps](/en/apis/shape/line-style-props); the key shape of `'cubic-edge'` is `'path'`, please refer to [PathStyleProps](/en/apis/shape/path-style-props). -Among them, `IAnimate` is defined as follows: + -| Name | Type | Default | Description | -| :--------------------- | :--------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `IAnimate.fields` | `string[]` | `undefined` | The names of the graphic style properties related to this animation, for example, `['fill', 'lineWidth']` | -| `IAnimate.shapeId` | `string` | `group` | The ID of the graphic on which this animation is to be performed. If not specified, it means the animation is performed on the entire graphic group | -| `IAnimate.order?` | `number` | `0` | The order in which this animation is executed among `IAnimate[]`, allowing for sequential playback of multiple animations during one update | -| `IAnimate.duration?` | `number` | `500` | The duration of this animation, the smaller the value, the faster the animation speed | -| `IAnimate.iterations?` | `number` | `1` | The number of times this animation is executed, -1 represents looping execution | -| `IAnimate.easing?` | `string` | `'cubic-bezier(0.250, 0.460, 0.450, 0.940)'` | The easing function of this animation, the possible values can be referred to [MDN easing definition](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing) | + -`IStateAnimate` is defined as follows, which adds a field `states` specifying the states in which this animation is executed to `IAnimate`: + -```typescript -interface IStateAnimate extends IAnimate { - states: string[]; -} -``` + -### EdgeDisplayModelData.keyShape + -The style configuration of the key shape of the edge. The key shape of the edge is the overall path shape of the edge. +:::info +The following attributes are inherited from [EdgeModel](./EdgeModel.en.md) +::: -- **Required**: False; -- **Type**: `ShapeStyle`, the shape style configuration of the key shape depends on the different main shapes. For example, the key shape of `'line-edge'` is `'line'`, please refer to [Line shape style](../shape/LineStyleProps.en.md); the key shape of `'cubic-edge'` is `'path'`, please refer to [Path shape style](../shape/PathStyleProps.en.md). - -### EdgeDisplayModelData.iconShape - -The icon shape of the edge (built-in edge support, custom edges that inherit these built-in edges also support it without overriding the relevant content). It is located in front of the text. It can be an image or text, and text supports iconfont. - -- **Required**: False; -- **Type**: - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -Among them, the related graphics styles refer to [`TextStyleProps`text shape style](../shape/TextStyleProps.en.md) and [`ImageStyleProps` image shape style](../shape/ImageStyleProps.en.md). - -### EdgeDisplayModelData.haloShape - -In built-in edges and themes, `haloShape` refers to the halo effect displayed around the key shape (`keyShape`) of the edge in the `active` state (usually triggered when the mouse hovers over) and the `selected` state (usually triggered in the selected state). In the logic of built-in edges, the graphic type and color of `haloShape` follow the key shape (`keyShape`). - -- **Required**: False; -- **Type**: `ShapeStyle`, the graphic type of haloShape follows the key shape (`keyShape`). The shape style configuration is different for different main shapes. For example, the key shape of `'line-edge'` is `'line'`, please refer to [Line shape style](../shape/LineStyleProps.en.md); the key shape of `'cubic-edge'` is `'path'`, please refer to [Path shape style](../shape/PathStyleProps.en.md). - -### EdgeDisplayModelData.labelShape - -The text shape of the edge, both built-in edges and custom edges that inherit the built-in edges (without overriding the relevant content) support it. - -- **Required**: False; -- **Type**: - -```typescript - TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the edge, which supports the start, middle, and end of the edge - */ - position?: 'start' | 'middle' | 'end'; - /** - * The offset of the text shape relative to the key shape (keyShape) of the edge in the x direction - */ - offsetX?: number; - /** - * The offset of the text shape relative to the key shape (keyShape) of the edge in the y direction - */ - offsetY?: number; - /** - * The offset of the text shape relative to the key shape (keyShape) of the edge in the z direction - */ - offsetZ?: number; - /** - * The maximum width allowed for the text, if specified as a number, it represents the pixel value, if specified as text with '%', it represents the percentage of the size of the key shape (keyShape). The default value is '60%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * Whether the text rotates with the edge - */ - autoRotate?: boolean; - }; -``` - -Among them, the related graphic styles refer to [TextStyleProps text shape style](../shape/TextStyleProps.en.md). - -### EdgeDisplayModelData.labelBackgroundShape - -The background shape of the text of the edge, which is a rectangle. If not set, it will not be displayed. Setting it to `{}` will use the default style in the theme to display the background shape of the text. - -- **Required**: False; -- **Type**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // The padding distance between the text and the background rectangle -}; -``` - -Among them, please refer to the rectangle style type [`RectStyleProps`](../shape/RectStyleProps.en.md). - -### EdgeDisplayModelData. - -The badge of the edge, including text and background shape. Unlike nodes that support multiple badges, the built-in edge only supports one badge, which is located behind the text. - -- **Required**: False; -- **Type**: - -```typescript - ShapeStyleProps & { - /** - * The background color of the badge - */ - color?: string; - /** - * The color of the text on the badge - */ - textColor?: string; - } -``` - -### EdgeDisplayModelData.otherShapes - -上面所有的 xxShape(s) 均为 G6 All the xxShape(s) mentioned above are possible graphics in the standard edge defined by G6. Other graphics in custom edges should be defined and configured in `otherShapes`. - -- **Required**: False; -- **Type**: - -```typescript -{ - // The key is the graphic id, the format specified by the specification is xxShape - // The value is the graphic style configuration (different graphics have different configurations, see the relevant graphics documentation) and the animation of the graphic - [shapeId: string]: ShapeStyleProps; -} -``` - -Among them, different graphic styles refer to the corresponding graphic type documents under the [Shape Style](../shape/BaseStyleProps.en.md) directory. + diff --git a/packages/site/docs/apis/data/EdgeDisplayModel.zh.md b/packages/site/docs/apis/data/EdgeDisplayModel.zh.md index 7ffdd145e05..3cf15668829 100644 --- a/packages/site/docs/apis/data/EdgeDisplayModel.zh.md +++ b/packages/site/docs/apis/data/EdgeDisplayModel.zh.md @@ -1,216 +1,54 @@ --- title: EdgeDisplayModel 渲染数据 -order: 11 +order: 8 --- -EdgeDisplayModel（边的渲染/展示数据） 由 EdgeModel（内部流转数据）通过您配置在图实例上 mapper（[specification.edge](../graph/Specification.zh.md#edge)）映射后的结果，仅用于内部渲染时消费，您在其他任何地方不会消费它。数据类型继承自内部流转的边数据类型 [`EdgeModel`](./EdgeModel.zh.md)，扩展后定义如下： +EdgeDisplayModel 为边的渲染数据，由 [EdgeModel](./EdgeModel.zh.md) 经过[数据映射](./DataIntro.zh.md#mappers-数据映射)后的结果，该数据仅能被 G6 访问。 -```typescript -interface EdgeDisplayModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeDisplayModelData; // 扩展了 EdgeModelData -} -``` + -## id - -边的唯一 ID，边创建后，ID 不可被修改。 - -- **是否必须**: 是； -- **类型**: `string|number` - -## source +## source 必须 边起始节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 -- **是否必须**: 是； -- **类型**: `string|number` +**类型**：`string | number` -## target +## target 必须 边结束节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 -- **是否必须**: 是； -- **类型**: `string|number` - -## data - -EdgeDisplayModelData 中的数据已经是 EdgeModel 通过 Graph 实例上配置的对应 mapper（[specification.edge](../graph/Specification.zh.md#edge)）映射后的结果，这里面应当存储所有 EdgeModel 的内容，再额外加上许多的图形样式配置。 - -- **是否必须**: 是； -- **类型**: [`EdgeDisplayModelData`](#EdgeDisplayModelDatalodlevels)，基于 [`EdgeModel`](./EdgeModel.zh.md#edgemodeldatatype) 额外扩展内容如下文： - -### EdgeDisplayModelData.lodLevels - -对于该边而言，设定图缩放等级的划分方式。是一个缩放系数范围的数组，表示缩放等级的划分。其中有一项的 `primary` 应当为 `true`，代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。 - -- **是否必须**: 否； -- **类型**: `LodLevel`[]，其中 `LodLevel` 如下表： - -| Name | Type | Description | -| :---------- | :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `zoomRange` | `[number, number]` | 本层级所定义的图缩放等级范围，当图缩放等级 zoom >= zoomRange[0] && zoom < zoomRange[1] 时，表示在该层级下 | -| `primary` | `boolean` | 是否为主层级，若为 `true` 则代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。在 `EdgeDisplayModelData.lodLevels` 中，应当只有一个层级为 `primary: true` | - -### EdgeDisplayModelData.animates - -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates)。 - -- **是否必须**: 否； -- **类型**: `IAnimates`，定义如下： - -```typescript -interface IAnimates { - buildIn?: IAnimate[]; // 边中某些图形创建时的动画 - buildOut?: IAnimate[]; // 边中某些图形销毁时的动画 - show?: IAnimate[]; // 边中某些图形从隐藏变为显示时的动画 - hide?: IAnimate[]; // 边中某些图形从显示变为隐藏时的动画 - update?: (IAnimate | IStateAnimate)[]; // 边中某些图形在相关数据或状态更新时的动画 -} -``` - -其中，`IAnimate` 定义如下： - -| Name | Type | Default | Description | -| :--------------------- | :--------- | :------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | -| `IAnimate.fields` | `string[]` | `undefined` | 该动画相关的图形样式属性名称，例如 `['fill', 'lineWidth']` | -| `IAnimate.shapeId` | `string` | `group` | 该动画需要在哪个图形上执行，此处指定该图形的 ID。不指定则代表整个图形分组上的动画 | -| `IAnimate.order?` | `number` | `0` | 该动画在 `IAnimate[]` 中执行的顺序，借此可实现一次更新多个动画的顺序播放 | -| `IAnimate.duration?` | `number` | `500` | 该动画执行一次所使用的时间，该值越小，则动画速度越快 | -| `IAnimate.iterations?` | `number` | `1` | 该动画执行的次数，-1 代表循环执行 | -| `IAnimate.easing?` | `string` | `'cubic-bezier(0.250, 0.460, 0.450, 0.940)'` | 该动画的缓动函数，可以设置的值可参考 [MDN easing 定义](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing) | - -`IStateAnimate` 定义如下，即在 `IAnimate` 基础上增加了一个指定状态的字段 `states`，表示该动画在这些状态变更的时候执行： +**类型**：`string | number` -```typescript -interface IStateAnimate extends IAnimate { - states: string[]; -} -``` +## data 必须 -### EdgeDisplayModelData.keyShape +基于 [EdgeModel](./EdgeModel.zh.md) 的内容额外加上了图形样式配置。 -边主图形的样式配置。边的主图形是边的整体路径图形。 + -- **是否必须**: 否； -- **类型**: `ShapeStyle`，根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [Line 图形样式](../shape/LineStyleProps.zh.md)；`'cubic-edge'` 的主图形是 `'path'` 参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 + -### EdgeDisplayModelData.iconShape + -边的图标图形（内置边支持，继承这些内置边的自定义边在无复写相关内容的情况下同样支持），位于文本前方。可以是图片或文本，文本支持 iconfont。 +### keyShape -- **是否必须**: 否； -- **类型**: +**类型**：`ShapeStyle` -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` +> `'line-edge'` 的主图形是 ['line'](/apis/shape/line-style-props)；`'cubic-edge'` 的主图形是 ['path'](/apis/shape/path-style-props) -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)，和 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 +边主图形的样式配置。边的主图形是边的路径图形 -### EdgeDisplayModelData.haloShape + -在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 + -- **是否必须**: 否； -- **类型**: `ShapeStyle`，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [Line 图形样式](../shape/LineStyleProps.zh.md)；`'cubic-edge'` 的主图形是 `'path'` 参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 + -### EdgeDisplayModelData.labelShape + -边的文本图形，内置边或继承内置边（未复写相关内容）的自定义边均支持。 + -- **是否必须**: 否； -- **类型**: +:::info{title=提示} +下列属性继承自 [EdgeModel](./EdgeModel.zh.md) +::: -```typescript - TextStyleProps & { - /** - * 文本相对于边主图形 (keyShape) 的位置，支持在边的起始处、中央、结束处 - */ - position?: 'start' | 'middle' | 'end'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '60%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' - */ - maxWidth?: string | number; - /** - * 文本是否跟随边旋转 - */ - autoRotate?: boolean; - }; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。 - -### EdgeDisplayModelData.labelBackgroundShape - -边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -- **是否必须**: 否； -- **类型**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 -}; -``` - -其中，参考矩形样式类型 [`RectStyleProps`](../shape/RectStyleProps.zh.md)。 - -### EdgeDisplayModelData.badgeShape - -边的徽标，包括了文本和背景图形。和节点支持多个徽标不同，内置边仅支持一个徽标，位于文本后方。 - -- **是否必须**: 否； -- **类型**: - -```typescript - ShapeStyleProps & { - /** - * 徽标的背景颜色 - */ - color?: string; - /** - * 徽标上文本的颜色 - */ - textColor?: string; - } -``` - -### EdgeDisplayModelData.otherShapes - -上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -} -``` - -其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 + diff --git a/packages/site/docs/apis/data/EdgeModel.en.md b/packages/site/docs/apis/data/EdgeModel.en.md index 01d98636f47..efa66c9572b 100644 --- a/packages/site/docs/apis/data/EdgeModel.en.md +++ b/packages/site/docs/apis/data/EdgeModel.en.md @@ -1,116 +1,28 @@ --- title: EdgeModel -order: 8 +order: 7 --- -EdgeModel represents the edge data that is internally passed through the `EdgeUserModel` and transformed on the graph instance. You consume this data anywhere afterwards. Each edge item extends from [`EdgeUserModel`](./EdgeUserModel.zh.md) and is defined as follows after expansion: +EdgeModel is the internal edge data, which is obtained by [EdgeUserModel](./EdgeUserModel.en.md) through [transforms](./DataIntro.en.md#transforms). -```typescript -interface EdgeModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeModelData; // = EdgeModelData -} -``` + -## id + -The unique ID of the edge. Once the node is created, the ID cannot be modified. +## source Required -- **Required**: True; -- **Type**: `string|number` - -## source +**Type**: `string | number` The ID of the source node of the edge, which should correspond to an item in `nodes`. Otherwise, the edge data will not be added to the graph. -- **Required**: True; -- **Type**: `string|number` +## target Required -## target +**Type**: `string | number` The ID of the target node of the edge, which should correspond to an item in nodes. Otherwise, the edge data will not be added to the graph. -- **Required**: True; -- **Type**: `string|number` - -## data - -The data in InnerModelData is the result of UserModelData transformed through a series of transform functions on the Graph instance. The business data may have been converted, filtered, and merged. - -- **Required**: True; -- **Type**: `EdgeModelData`, same as [`EdgeModelData`](./EdgeUserModel.zh.md#EdgeModelDatatype) as follows: - -### EdgeModelData.type - -The rendering type of the edge, which can be a registered edge type on the graph, with the built-in and default registered types being `'line-edge'` and `'loop-edge'`. The default value is `'line-edge'`. - -- **Required**: False; -- **Type**: `string`; - -### EdgeModelData.visible - -Whether the edge is displayed by default. - -- **Required**: False; -- **Type**: `boolean`; - -### EdgeModelData.color - -The theme color of the main shape (keyShape) of the edge, with a value in hexadecimal string format. This is provided for convenient simple configuration, and more style configurations should be configured in the edge mapper of the Graph instance for the keyShape and various shape styles. - -- **Required**: False; -- **Type**: `string`; - -### EdgeModelData.label - -The text content of the `labelShape` of the edge. This is provided for convenient simple configuration, and more style configurations should be configured in the edge mapper of the Graph instance for the text value or other shape styles of the `labelShape`. - -- **Required**: False; -- **Type**: `string`; - -### EdgeModelData.badge - -The configuration of the badge on the edge, with the built-in badge being drawn after the text. More style configurations should be configured in the edge mapper of the Graph instance for the shape styles of the `badgeShapes`. - -- **Required**: False; -- **Type**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // required when type is 'text' - text?: string, // required when type is 'icon' -}; -``` - -### EdgeModelData.icon - -The configuration of the icon on the edge. The built-in edge icon is drawn after the text. This is provided for convenient simple configuration, and more style configurations should be configured in the edge mapper of the Graph instance for the shape styles of the iconShape. - -- **Required**: False; -- **Type**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // required when type is 'text' - text?: string, // required when type is 'icon' -} -``` - -### EdgeModelData.sourceAnchor - -The `anchorPoints` on the source node indicate the allowed positions where related edges can connect, and is an array. The `sourceAnchor` of the edge indicates which anchor point to connect to when the edge connects to the starting point, corresponding to the index of the corresponding position in the `anchorPoints` of the source node. - -- **Required**: False; -- **Type**: `number`; - -### EdgeModelData.targetAnchor +## data Required -The `anchorPoints` on the target node indicate the allowed positions where related edges can connect, and is an array. The `targetAnchor` of the edge indicates which anchor point to connect to when the edge connects to the ending point, corresponding to the index of the corresponding position in the `anchorPoints` of the target node. + -- **Required**: False; -- **Type**: `number`; + diff --git a/packages/site/docs/apis/data/EdgeModel.zh.md b/packages/site/docs/apis/data/EdgeModel.zh.md index a28993a72da..a5fd28c4953 100644 --- a/packages/site/docs/apis/data/EdgeModel.zh.md +++ b/packages/site/docs/apis/data/EdgeModel.zh.md @@ -1,116 +1,28 @@ --- title: EdgeModel 内部数据 -order: 8 +order: 7 --- -EdgeModel 为内部流转的边数据，由 EdgeUserModel 经过皮质在图实例上的 transforms 计算而得。后续您在任意地方消费的都是这一份数据。每一项边的类型继承自 [`EdgeUserModel`](./EdgeUserModel.zh.md)，扩展后定义如下： +EdgeModel 为内部流转的边数据，由 [EdgeUserModel](./EdgeUserModel.zh.md) 经过[数据转换](./DataIntro.zh.md#transforms-数据转换)后得到。 -```typescript -interface EdgeModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeModelData; // = EdgeModelData -} -``` + -## id + -- **是否必须**: 是； -- **类型**: `string|number` +## source 必须 -边的唯一 ID，节点创建后，ID 不可被修改。 - -## source - -- **是否必须**: 是； -- **类型**: `string|number` +**类型**：`string | number` 边起始节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 -## target +## target 必须 -- **是否必须**: 是； -- **类型**: `string|number` +**类型**：`string | number` 边结束节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 -## data - -InnerModelData 中的数据已经是 UserModelData 通过 Graph 实例的一系列 transform 函数生成的结果，业务数据可能已经被转换、过滤、合并。 - -- **是否必须**: 是； -- **类型**: `EdgeModelData`，同 [`EdgeModelData`](./EdgeUserModel.zh.md#EdgeModelDatatype) 定义如下： - -### EdgeModelData.type - -- **是否必须**: 否； -- **类型**: `string`； - -边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。默认为 `'line-edge'`。 - -### EdgeModelData.visible - -- **是否必须**: 否； -- **类型**: `boolean`； - -边是否默认展示出来。 - -### EdgeModelData.color - -- **是否必须**: 否； -- **类型**: `string`； - -该边的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 keyShape 以及各种图形的图形样式。 - -### EdgeModelData.label - -- **是否必须**: 否； -- **类型**: `string`； - -边 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 labelShape 的 text 值或其他图形样式。 - -### EdgeModelData.badge - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -}; -``` - -边上的徽标配置，内置边的徽标绘制在文本后方。更多的样式配置应当在 Graph 实例的边 mapper 中配置 badgeShapes 的图形样式。 - -### EdgeModelData.icon - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -} -``` - -边上的 icon 配置。内置边的 icon 绘制在文本后方。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 iconShape 的图形样式。 - -### EdgeModelData.sourceAnchor - -- **是否必须**: 否； -- **类型**: `number`； - -起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 - -### EdgeModelData.targetAnchor +## data 必须 -- **是否必须**: 否； -- **类型**: `number`； + -终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 + diff --git a/packages/site/docs/apis/data/EdgeUserModel.en.md b/packages/site/docs/apis/data/EdgeUserModel.en.md index f2ff4ec443b..3862fc88011 100644 --- a/packages/site/docs/apis/data/EdgeUserModel.en.md +++ b/packages/site/docs/apis/data/EdgeUserModel.en.md @@ -1,116 +1,39 @@ --- title: EdgeUserModel -order: 4 +order: 6 --- -In the user input data, each edge model has the following type specifications. +The `edges` part of the user input data. -```typescript -interface EdgeUserModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeUserModelData; +An example of a data item: + +```json +{ + "id": "edge-1", + "source": "node-1", + "target": "node-2", + "data": {} } ``` -## id - -- **Required**: True; -- **Type**:`string|number` + -The unique ID of the edge. Once the edge is created, the ID cannot be changed. +## source Required -## source - -- **Required**: True; -- **Type**:`string|number` +**Type**: `string | number` The ID of the source node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. -## target +## target Required -- **Required**: True; -- **Type**:`string|number` +**Type**: `string | number` The ID of the target node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. -## data - -- **Required**: True; -- **Type**:[`EdgeUserModelData`](#edgeusermodeldatatype) - -The data of the edge, excluding the ID, source ID, and target ID. It is recommended to store business data. If data conversion is needed, it can be done through the transform function configured in the Graph instance, see [Specification.transforms](../graph/Specification.en.md#transforms). The converted data becomes the internal data that circulates within the graph. All subsequent accesses will be based on this internal data. For rendering-related data, it can be mapped using the edge mapper of the Graph instance, see [Specification.node](../graph/Specification.en.md#edge). The input of this mapper is the internal data, and the generated display data is only consumed by the renderer. Users will not obtain it anywhere. - -### EdgeUserModelData.type - -- **Required**: False; -- **Type**: `string`; - -The rendering type of the edge. It can be a pre-registered edge type in the graph, with `'line-edge'` and `'loop-edge'` being the built-in and default options. - -### EdgeUserModelData.visible - -- **Required**: False; -- **Type**: `boolean`; - -Whether the edge is visible by default. - -### EdgeUserModelData.color - -- **Required**: False; -- **Type**: `string`; - -The main color of the key shape (main shape) of the edge. It is a hexadecimal string. This is provided for simple configuration purposes. More style configurations for the key shape and other graphics should be configured in the edge mapper of the graph instance. - -### EdgeUserModelData.label - -- **Required**: False; -- **Type**: `string`; - -The text content of the label shape on the edge. This is provided for simple configuration purposes. More style configurations for the label shape should be configured in the edge mapper of the graph instance. - -### EdgeUserModelData.badge - -- **Required**: False; -- **Type**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // Required if type is 'text' - text?: string, // Required if type is 'icon' -}; -``` - -The configuration of the badge on the edge. The built-in badge is drawn after the text. More style configurations for the badge shapes should be configured in the edge mapper of the graph instance. - -### EdgeUserModelData.icon - -- **Required**: False; -- **Type**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // Required if type is 'text' - text?: string, // Required if type is 'icon' -} -``` - -The configuration of the icon on the edge. The built-in icon is drawn after the text. This is provided for simple configuration purposes. More style configurations for the icon shape should be configured in the edge mapper of the graph instance. - -### EdgeUserModelData.sourceAnchor - -- **Required**: False; -- **Type**: `number`; - -The `anchorPoints` on the source node indicate the positions where the related edges can connect. It is an array. The `sourceAnchor` of the edge indicates which anchor point to connect when connecting to the source node. It corresponds to the index of the corresponding position in the `anchorPoints` array of the source node. +## data Required -### EdgeUserModelData.targetAnchor +The edge data. -- **Required**: False; -- **Type**: `number`; + -The `anchorPoints` on the target node indicate the positions where the related edges can connect. It is an array. The `targetAnchor` of the edge indicates which anchor point to connect when connecting to the target node. It corresponds to the index of the corresponding position in the `anchorPoints` array of the target node. + diff --git a/packages/site/docs/apis/data/EdgeUserModel.zh.md b/packages/site/docs/apis/data/EdgeUserModel.zh.md index 2530ced9b3a..7df7fb8879f 100644 --- a/packages/site/docs/apis/data/EdgeUserModel.zh.md +++ b/packages/site/docs/apis/data/EdgeUserModel.zh.md @@ -1,116 +1,39 @@ --- title: EdgeUserModel 输入数据 -order: 4 +order: 6 --- -用户输入数据中，每一项边数据类型说明如下。 +用户输入数据中的 `edges` 部分内容。 -```typescript -interface EdgeUserModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeUserModelData; +下面是一个数据项实例： + +```json +{ + "id": "edge-1", + "source": "node-1", + "target": "node-2", + "data": {} } ``` -## id - -边的唯一 ID，节点创建后，ID 不可被修改。 + -- **是否必须**: 是； -- **类型**: `string|number` - -## source +## source 必须 边起始节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 -- **是否必须**: 是； -- **类型**: `string|number` +**类型**：`string | number` -## target +## target 必须 边结束节点的 ID，应与 `nodes` 中的一项对应，否则该边数据不会被加入到图中。 -- **是否必须**: 是； -- **类型**: `string|number` - -## data - -边除 ID、起点 ID、终点 ID 以外的数据，建议存放业务数据。若需要进行数据转换，可通过 Graph 实例的 transform 配置转换函数，见 [Specification.transforms](../graph/Specification.zh.md#transforms)。转换后的数据成为内部流通的数据 Inner Data，后续所有地方获取的都是这份内部数据。与渲染有关的可以通过 Graph 实例的边 mapper 进行映射，见 [Specification.edge](../graph/Specification.zh.md#edge)，该 mapper 的输入是 Inner Data，生成的结果 Display Data 只交给渲染器消费，用户不会在任何地方获得。 - -- **是否必须**: 是； -- **类型**: [`EdgeUserModelData`](#edgeusermodeldatatype) - -### EdgeUserModelData.type - -边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。 - -- 是否必须：否； -- 类型： `string`； - -### EdgeUserModelData.visible - -边是否默认展示出来。 - -- 是否必须：否； -- 类型： `boolean`； - -### EdgeUserModelData.color - -该边的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 keyShape 以及各种图形的图形样式。 - -- 是否必须：否； -- 类型： `string`； - -### EdgeUserModelData.label - -边 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 labelShape 的 text 值或其他图形样式。 - -- 是否必须：否； -- 类型： `string`； - -### EdgeUserModelData.badge - -边上的徽标配置，内置边的徽标绘制在文本后方。更多的样式配置应当在 Graph 实例的边 mapper 中配置 badgeShapes 的图形样式。 - -- 是否必须：否； -- 类型： - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -}; -``` - -### EdgeUserModelData.icon - -边上的 icon 配置。内置边的 icon 绘制在文本后方。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 iconShape 的图形样式。 - -- 是否必须：否； -- 类型： - -```typescript -{ - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -} -``` - -### EdgeUserModelData.sourceAnchor - -起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 +**类型**：`string | number` -- 是否必须：否； -- 类型： `number`； +## data 必须 -### EdgeUserModelData.targetAnchor +边数据 -终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 + -- 是否必须：否； -- 类型： `number`； + diff --git a/packages/site/docs/apis/data/GraphData.en.md b/packages/site/docs/apis/data/GraphData.en.md index 7f7b434c6ea..dd607e9e9fe 100644 --- a/packages/site/docs/apis/data/GraphData.en.md +++ b/packages/site/docs/apis/data/GraphData.en.md @@ -3,21 +3,43 @@ title: GraphData order: 1 --- -This chapter is type of `GraphData`, which is one of the input data type for graph instance. In the same time, v5's graph also accept the [TreeGraph](./TreeData.zh.md) type data. +Graph data (GraphData) is one of the data types received by Graph, which contains a collection of nodes, edges, and combos. + +An example of a graph data is as follows: + +```json +{ + "nodes": [ + { "id": "node-1", "data": { "parentId": "combo-1" } }, + { "id": "node-2", "data": { "parentId": "combo-1" } } + ], + "edges": [{ "id": "edge-1", "source": "node-1", "target": "node-2" }], + "combos": [{ "id": "combo-1", "data": {} }] +} +``` ## Properties -### nodes +### nodes Required + +**Type**: `NodeUserModel[]` + +- [NodeUserModel](./NodeUserModel.en.md) -- Required: Yes; -- Type: [`NodeUserModel`](./NodeUserModel.en.md)[]; +Nodes collection -### edges +### edges Required -- Required: Yes; -- Type: [`EdgeUserModel`](./EdgeUserModel.en.md)[]; +**Type**: `EdgeUserModel` + +- [EdgeUserModel](./EdgeUserModel.en.md) + +Edges collection ### combos -- Required: False; -- Type: [`ComboUserModel`](./ComboUserModel.en.md)[]; +**Type**: `ComboUserModel` + +- [ComboUserModel](./ComboUserModel.en.md) + +Combos collection diff --git a/packages/site/docs/apis/data/GraphData.zh.md b/packages/site/docs/apis/data/GraphData.zh.md index bd4d92f7b6c..1a73dafd6c3 100644 --- a/packages/site/docs/apis/data/GraphData.zh.md +++ b/packages/site/docs/apis/data/GraphData.zh.md @@ -3,21 +3,43 @@ title: GraphData order: 1 --- -本章介绍的 GraphData 是图数据的类型，是 Graph 接收的数据类型之一。同时，v5 还打通了 Graph 和 TreeGraph，即使用同一个 Graph 类，即可以读取本文中的 GraphData 数据格式，也可以读取树图的数据格式，树图数据格式见 [TreeData](./TreeData.zh.md)。 +图数据（GraphData）是 Graph 接收的数据类型之一，包含节点、边、群组 的集合。 + +一个图数据的示例如下： + +```json +{ + "nodes": [ + { "id": "node-1", "data": { "parentId": "combo-1" } }, + { "id": "node-2", "data": { "parentId": "combo-1" } } + ], + "edges": [{ "id": "edge-1", "source": "node-1", "target": "node-2" }], + "combos": [{ "id": "combo-1", "data": {} }] +} +``` ## 属性 -### nodes +### nodes 必须 + +**类型**：`NodeUserModel` + +- [NodeUserModel](./NodeUserModel.zh.md) -- 是否必须：`是`； -- 类型： [`NodeUserModel`](./NodeUserModel.zh.md)[]； +节点集 -### edges +### edges 必须 -- 是否必须：`是`； -- 类型： [`EdgeUserModel`](./EdgeUserModel.zh.md)[]； +**类型**：`EdgeUserModel` + +- [EdgeUserModel](./EdgeUserModel.zh.md) + +边集 ### combos -- 是否必须：`否`； -- 类型： [`ComboUserModel`](./ComboUserModel.zh.md)[]； +**类型**：`ComboUserModel` + +- [ComboUserModel](./ComboUserModel.zh.md) + +群组集 diff --git a/packages/site/docs/apis/data/NodeDisplayModel.en.md b/packages/site/docs/apis/data/NodeDisplayModel.en.md index 5ea202570cd..948eb77f9ea 100644 --- a/packages/site/docs/apis/data/NodeDisplayModel.en.md +++ b/packages/site/docs/apis/data/NodeDisplayModel.en.md @@ -1,274 +1,46 @@ --- title: NodeDisplayModel -order: 10 +order: 5 --- -NodeDisplayModel (Node rendering/display data) is the result of mapping the NodeModel (internal data) through the mapper you configured on the graph instance ([specification.node](../graph/Specification.en.md#node)). It is only consumed internally for rendering purposes and will not be consumed anywhere else. The data type inherits from the internal node data type [`NodeModel`](./NodeModel.en.md) and is defined as follows after extension: +NodeDisplayModel is the the rendering data of Node, which is obtained by [NodeModel](./NodeModel.en.md) through [data mapping](./DataIntro.en.md#mappers). NodeDisplayModel can only be accessed by G6. -```typescript -interface NodeDisplayModel { - id: string | number; - data: NodeDisplayModelData; // extends NodeModelData -} -``` + -## id +## data Required -- **Required**: True; -- **Type**: `string|number` +NodeDisplayModelData adds graphic style configuration on the basis of [NodeModel](./NodeModel.en.md). -The unique ID of the node. Once the node is created, the ID cannot be modified. + -## data + -The data in NodeDisplayModelData is the result of mapping NodeModel through the mapper configured on the graph instance ([specification.node](../graph/Specification.en.md#node)). It should store all the contents of NodeModel, along with additional graphical style configurations. + -- **Required**: True; -- **Type**: [`NodeDisplayModelData`](#nodedisplaymodeldatalodlevels), which extends [`NodeModel`](./NodeModel.en.md#nodemodeldatatype) with additional content as described below:， +### keyShape -```typescript -type NodeModelData = NodeModelData & NodeShapeStyles & { lodLevels?: LodLevel[] }; -``` +**Type**: `ShapeStyle` -### NodeDisplayModelData.lodLevels +> Which varies depending on the main shape. For example, the main shape of `'circle-node'` is `'circle'`, refer to [Circle Graphic Style](/en/apis/shape/circle-style-props); the main shape of `'image-node'` is `'image'`, refer to [Image Graphic Style](/en/apis/shape/image-style-props). -Specifies how the graph is divided into zoom levels for this node. It is an array of zoom level ranges, where each range is represented by a `zoomRange` range. One of the ranges should have `primary: true`, indicating that its level number is 0. Levels with smaller `zoomRange` values have decreasing level numbers, while levels with larger `zoomRange` values have increasing level numbers. The level number corresponds to the lod value in the shape configuration below. +Configuration of the main shape style of the node. The main shape of a node represents the primary shape of the node and is also used to calculate the position where edges connect. -- **Required**: False; -- **Type**: `LodLevel`[]，where `LodLevel` has the following properties: + -| Name | Type | Description | -| :---------- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `zoomRange` | `[number, number]` | The zoom level range defined for this level. When the graph zoom level zoom >= zoomRange[0] && zoom < zoomRange[1], it indicates that the node is in this level | -| `primary` | `boolean` | Whether it is the primary level. If `true`, it means that the level number is 0. Levels with smaller this `zoomRange` values have decreasing level numbers, while levels with larger this `zoomRange` values have increasing level numbers. In the `NodeDisplayModelData.lodLevels` array, there should be only one level with `primary: true`. And the level number corresponds to the `lod` value in the shape style configurations below | + -### NodeDisplayModelData.animates + -Configuration of graphic animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). + -- **Required**: False; -- **Type**: `IAnimates`, defined as follows: + -```typescript -interface IAnimates { - buildIn?: IAnimate[]; // Animations when certain graphics are created in the node - buildOut?: IAnimate[]; // Animations when certain graphics are destroyed in the node - show?: IAnimate[]; // Animations when certain graphics transition from hidden to visible in the node - hide?: IAnimate[]; // Animations when certain graphics transition from visible to hidden in the node - update?: (IAnimate | IStateAnimate)[]; // Animations when certain graphics undergo data or state updates in the node -} -``` + -In this, `IAnimate` is defined as follows: + -| Name | Type | Default | Description | -| :--------------------- | :--------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `IAnimate.fields` | `string[]` | `undefined` | The names of the graphic style properties related to this animation, for example `['fill', 'lineWidth']` | -| `IAnimate.shapeId` | `string` | `group` | The ID of the graphic on which the animation needs to be performed. If not specified, it represents the animation on the entire graphic group | -| `IAnimate.order?` | `number` | `0` | The order in which this animation is executed among `IAnimate[]`, allowing for sequential playback of multiple animations during one update | -| `IAnimate.duration?` | `number` | `500` | The duration of this animation, the smaller the value, the faster the animation speed | -| `IAnimate.iterations?` | `number` | `1` | The number of times this animation is executed, -1 represents looping execution | -| `IAnimate.easing?` | `string` | `'cubic-bezier(0.250, 0.460, 0.450, 0.940)'` | The easing function of this animation, the possible values can be referred to [MDN easing definition](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing) | +:::info +The following attributes are inherited from [NodeModel](./NodeModel.en.md) +::: -`IStateAnimate` is defined as follows, which adds a field `states` specifying the states in which this animation is executed to `IAnimate`: - -```typescript -interface IStateAnimate extends IAnimate { - states: string[]; -} -``` - -### NodeDisplayModelData.keyShape - -Configuration of the main graphic style of the node. The main graphic of a node represents the primary shape of the node and is also used to calculate the position where edges connect. - -- **Required**: False; -- **Type**: `ShapeStyle`, which varies depending on the main graphic. For example, the main graphic of `'circle-node'` is `'circle'`, refer to [Circle Graphic Style](../shape/CircleStyleProps.en.md); the main graphic of `'image-node'` is `'image'`, refer to [Image Graphic Style](../shape/ImageStyleProps.en.md). - -### NodeDisplayModelData.iconShape - -The icon graphic at the center of the node (except for the built-in node type `'modelRect-node'`, which is supported by other built-in nodes and custom nodes that inherit from them without overriding the relevant content). It can be an image or text, with text supporting iconfont (assign `fontFamily: 'iconfont'`). - -- **Required**: False; -- **Type**: - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md) and [`ImageStyleProps` Image Shape Style](../shape/ImageStyleProps.en.md). - -### NodeDisplayModelData.haloShape - -In built-in nodes and themes, `haloShape` refers to the halo effect graphic displayed around the main graphic (keyShape) of a node when it is in the `active` state (usually triggered when the mouse hovers) or `selected` state (usually triggered when it is selected). In the logic of built-in nodes, the graphic type and color of `haloShape` follow the main graphic (`keyShape`). - -- **Required**: False; -- **Type**: `ShapeStyle`, the graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'circle-node'` is `'circle'`, refer to [Circle Shape Style](../shape/CircleStyleProps.en.md); the main graphic of `'image-node'` is `'image'`, refer to [Image Shape Style](../shape/ImageStyleProps.en.md). - -### NodeDisplayModelData.labelShape - -The text shape of the node, both built-in nodes and custom nodes that inherit from built-in nodes (without overriding related content) are supported. - -- **Required**: False; -- **Type**: - -```typescript - TextStyleProps & { - /** - * The position of the text relative to the key shape (keyShape) of the node, supports above, below, left, right, and center - */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; - /** - * The x offset of the text shape relative to the key shape (keyShape) - */ - offsetX?: number; - /** - * The y offset of the text shape relative to the key shape (keyShape) - */ - offsetY?: number; - /** - * The z offset of the text shape relative to the key shape (keyShape) - */ - offsetZ?: number; - /** - * The maximum width allowed for the text. - * If specified as a number, it represents the pixel value. - * If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size. - * The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape. - * If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end. - */ - maxWidth?: string | number; - /** - * The rotation angle of the text (in radians) - */ - angle?: number; - }; -``` - -The related shape style can be referred to in [TextStyleProps](../shape/TextStyleProps.en.md). - -### NodeDisplayModelData.labelBackgroundShape - -The background shape of the text of the node, which is a rectangle. If not set, it will not be displayed. Setting it to `{}` will use the default style in the theme to display the background shape of the text. - -- **Required**: False; -- **Type**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // The padding distance between the text and the background rectangle -}; -``` - -The related rectangle style type can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md). - -### NodeDisplayModelData.badgeShapes - -The badges around the node. A single badge includes text and background shape. The badgeShapes configuration is for multiple badges. [Node Badge Example](/en/examples/item/defaultNodes/#circle). - -- **Required**: False; -- **Type**: - -```typescript - { - /** - * The background color of the badge - * (works for all badges, lower priority than the color setting of individual badges) - */ - color?: string; - /** - * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。 - * 优先级低于下面单个徽标的 color 设置 - */ - palette?: string[]; - /** - * The color palette for the badge background color, - * which means the individual badges below will automatically use the colors in the palette. - * Lower priority than the color setting of individual badges - */ - textColor?: string; - /** - * The text color of the badge (works for all badges, - * lower priority than the textColor setting of individual badges) - */ - [key: number]: ShapeStyle & { - /** - * The position of this badge, supporting the values below - */ - position?: IBadgePosition; - /** - * The background color of this badge - */ - color?: string; - /** - * The text color of this badge - */ - textColor?: string; - }; - } -``` - -The `BadgePosition` values are as follows: - -| Value | Description | -| :-------------- | :------------------------------------------- | -| `'rightTop'` | Top right corner, recommended | -| `'right'` | Middle right, recommended | -| `'rightBottom'` | Bottom right corner, recommended | -| `'leftTop'` | Top left corner | -| `'left'` | Middle left | -| `'leftBottom'` | Bottom left corner | -| `'bottom'` | Middle bottom | -| `'top'` | Middle top | -| `'bottomRight'` | Bottom right corner, same as `'rightBottom'` | -| `'bottomLeft'` | Bottom left corner, same as `'leftBottom'` | -| `'topRight'` | Top right corner, same as `'rightTop'` | -| `'topLeft'` | Top left corner, same as `'leftTop'` | - -### NodeDisplayModelData.anchorShapes - -The circular shapes (anchor shapes) of the edges entering each side of the node. The anchorShapes configuration is for multiple anchor shapes. [Node Anchor Example](/en/examples/item/defaultNodes/#circle). - -- **Required**: False; -- **Type**: - -```typescript -// The outer circleStyleProps can be used to configure the style of all anchor shapes (circles), -// with lower priority than the individual anchor shape configuration -CircleStyleProps & { - // Individual anchor shape configuration, - // with higher priority than the outer circleStyleProps - [key: number]: CircleStyleProps & { - // The position of this anchor shape, can be configured as a string or number array representing the percentage position relative to the key shape (keyShape) bounding box, - // for example, [0.5, 1] means it is located in the middle right of the key shape - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` - -The related circle style can be referred to in [`CircleStyleProps`](../shape/CircleStyleProps.en.md). - -### NodeDisplayModelData.otherShapes - -All the xxShape(s) above are the possible shapes that exist in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`. - -- **Required**: False; -- **Type**: - -```typescript -{ - // key is the shape id, in the format of xxShape specified by the specification - // value is the shape style configuration (different shapes have different configurations, see the relevant shape documents), and the animation of the shape - [shapeId: string]: ShapeStyleProps; -} -``` - -The different shape styles can be referred to in the corresponding shape type documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory. + diff --git a/packages/site/docs/apis/data/NodeDisplayModel.zh.md b/packages/site/docs/apis/data/NodeDisplayModel.zh.md index 0b8c343666e..fab89a6d5bc 100644 --- a/packages/site/docs/apis/data/NodeDisplayModel.zh.md +++ b/packages/site/docs/apis/data/NodeDisplayModel.zh.md @@ -1,263 +1,46 @@ --- title: NodeDisplayModel 渲染数据 -order: 10 +order: 5 --- -NodeDisplayModel（节点的渲染/展示数据） 由 NodeModel（内部流转数据）通过您配置在图实例上 mapper（[specification.node](../graph/Specification.zh.md#node)）映射后的结果，仅用于内部渲染时消费，您在其他任何地方不会消费它。数据类型继承自内部流转的节点数据类型 [`NodeModel`](./NodeModel.zh.md)，扩展后定义如下： +NodeDisplayModel（节点的渲染数据）是 [NodeModel](./NodeModel.zh.md) 经过[数据映射](./DataIntro.zh.md#transforms-数据转换)后的结果，该数据仅能被 G6 访问。 -```typescript -interface NodeDisplayModel { - id: string | number; - data: NodeDisplayModelData; // 扩展了 NodeModelData -} -``` + -## id +## data 必须 -节点的唯一 ID，节点创建后，ID 不可被修改。 +基于 [NodeModel](./NodeModel.zh.md) 的内容额外加上了图形样式配置。 -- **是否必须**: 是； -- **类型**: `string|number` + -## data + -NodeDisplayModelData 中的数据已经是 NodeModel 通过 Graph 实例上配置的对应 mapper（[specification.node](../graph/Specification.zh.md#node)）映射后的结果，这里面应当存储所有 NodeModel 的内容，再额外加上许多的图形样式配置。 + -- **是否必须**: 是； -- **类型**: [`NodeDisplayModelData`](#nodedisplaymodeldatalodlevels)，基于 [`NodeModel`](./NodeModel.zh.md#nodemodeldatatype) 额外扩展内容如下文： +### keyShape -```typescript -type NodeModelData = NodeModelData & NodeShapeStyles & { lodLevels?: LodLevel[] }; -``` +**类型**：`ShapeStyleProps` -### NodeDisplayModelData.lodLevels - -对于该节点而言，设定图缩放等级的划分方式。是一个缩放系数范围的数组，表示缩放等级的划分。其中有一项的 `primary` 应当为 `true`，代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。 - -- **是否必须**: 否； -- **类型**: `LodLevel`[]，其中 `LodLevel` 如下表： - -| Name | Type | Description | -| :---------- | :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `zoomRange` | `[number, number]` | 本层级所定义的图缩放等级范围，当图缩放等级 zoom >= zoomRange[0] && zoom < zoomRange[1] 时，表示在该层级下 | -| `primary` | `boolean` | 是否为主层级，若为 `true` 则代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。在 `NodeDisplayModelData.lodLevels` 中，应当只有一个层级为 `primary: true` | - -### NodeDisplayModelData.animates - -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates)。 - -- **是否必须**: 否； -- **类型**: `IAnimates`，定义如下： - -```typescript -interface IAnimates { - buildIn?: IAnimate[]; // 节点中某些图形创建时的动画 - buildOut?: IAnimate[]; // 节点中某些图形销毁时的动画 - show?: IAnimate[]; // 节点中某些图形从隐藏变为显示时的动画 - hide?: IAnimate[]; // 节点中某些图形从显示变为隐藏时的动画 - update?: (IAnimate | IStateAnimate)[]; // 节点中某些图形在相关数据或状态更新时的动画 -} -``` - -其中，`IAnimate` 定义如下： - -| Name | Type | Default | Description | -| :--------------------- | :--------- | :------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | -| `IAnimate.fields` | `string[]` | `undefined` | 该动画相关的图形样式属性名称，例如 `['fill', 'lineWidth']` | -| `IAnimate.shapeId` | `string` | `group` | 该动画需要在哪个图形上执行，此处指定该图形的 ID。不指定则代表整个图形分组上的动画 | -| `IAnimate.order?` | `number` | `0` | 该动画在 `IAnimate[]` 中执行的顺序，借此可实现一次更新多个动画的顺序播放 | -| `IAnimate.duration?` | `number` | `500` | 该动画执行一次所使用的时间，该值越小，则动画速度越快 | -| `IAnimate.iterations?` | `number` | `1` | 该动画执行的次数，-1 代表循环执行 | -| `IAnimate.easing?` | `string` | `'cubic-bezier(0.250, 0.460, 0.450, 0.940)'` | 该动画的缓动函数，可以设置的值可参考 [MDN easing 定义](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing) | - -`IStateAnimate` 定义如下，即在 `IAnimate` 基础上增加了一个指定状态的字段 `states`，表示该动画在这些状态变更的时候执行： - -```typescript -interface IStateAnimate extends IAnimate { - states: string[]; -} -``` - -### NodeDisplayModelData.keyShape +> `'circle-node'` 的主图形是 ['circle'](/apis/shape/circle-style-props)；`'image-node'` 的主图形是 ['image'](/apis/shape/image-style-props) 节点主图形的样式配置。节点的主图形表达了节点的主要形状。还用于计算边的连入位置。 -- **是否必须**: 否； -- **类型**: `ShapeStyle`，根据不同的主图形，图形样式配置项不同。例如 `'circle-node'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'image-node'` 的主图形是 `'image'` 参考 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 - -### NodeDisplayModelData.iconShape - -节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。 - -- **是否必须**: 否； -- **类型**: - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)，和 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 - -### NodeDisplayModelData.haloShape - -在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 - -- **是否必须**: 否； -- **类型**: `ShapeStyle`，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-node'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'image-node'` 的主图形是 `'image'` 参考 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 - -### NodeDisplayModelData.labelShape - -节点的文本图形，内置节点或继承内置节点（未复写相关内容）的自定义节点均支持。 - -- **是否必须**: 否； -- **类型**: - -```typescript - TextStyleProps & { - /** - * 文本相对于节点主图形 (keyShape) 的位置，支持在主图形的上方、下方、左方、右方、中间 - */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; - /** - * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 - */ - offsetX?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 - */ - offsetY?: number; - /** - * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 - */ - offsetZ?: number; - /** - * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' - */ - maxWidth?: string | number; - /** - * 文本旋转角度（弧度制） - */ - angle?: number; - }; -``` - -其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。 - -### NodeDisplayModelData.labelBackgroundShape - -节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -- **是否必须**: 否； -- **类型**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 -}; -``` - -其中，参考矩形样式类型 [`RectStyleProps`](../shape/RectStyleProps.zh.md)。 - -### NodeDisplayModelData.badgeShapes - -节点四周的徽标，单个徽标包括了文本和背景图形，badgeShapes 配置的是多个徽标。[节点徽标 DEMO](/zh/examples/item/defaultNodes/#circle)。 - -- **是否必须**: 否； -- **类型**: - -```typescript - { - /** - * 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置） - */ - color?: string; - /** - * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。 - * 优先级低于下面单个徽标的 color 设置 - */ - palette?: string[]; - /** - * 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置） - */ - textColor?: string; - /** - * 单个徽标的样式配置，由县局高于上面的配置 - */ - [key: number]: ShapeStyle & { - /** - * 该徽标的位置，支持的取值见下文 - */ - position?: IBadgePosition; - /** - * 该徽标的背景色 - */ - color?: string; - /** - * 该徽标的文本色 - */ - textColor?: string; - }; - } -``` - -`BadgePosition` 取值如下： - -| Value | Description | -| :-------------- | :------------------------- | -| `'rightTop'` | 右上角，推荐 | -| `'right'` | 右侧中间，推荐 | -| `'rightBottom'` | 右下角，推荐 | -| `'leftTop'` | 左上角 | -| `'left'` | 左侧中间 | -| `'leftBottom'` | 左下角 | -| `'bottom'` | 下方中间 | -| `'top'` | 上方中间 | -| `'bottomRight'` | 右下角，同 `'rightBottom'` | -| `'bottomLeft'` | 左下角，同 `'leftBottom'` | -| `'topRight'` | 右上角，同 `'rightTop'` | -| `'topLeft'` | 左上角，同 `'leftTop'` | - -### NodeDisplayModelData.anchorShapes - -节点四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle)。 + -- **是否必须**: 否； -- **类型**: + -```typescript -// 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置 -CircleStyleProps & { - // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - [key: number]: CircleStyleProps & { - // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` + -其中，相关的图形样式参考 [`CircleStyleProps` 圆形图形样式](../shape/CircleStyleProps.zh.md)。 + -### NodeDisplayModelData.otherShapes + -上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中。 + -- **是否必须**: 否； -- **类型**: + -```typescript -{ - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -} -``` +:::info{title=提示} +下列属性继承自 [NodeModel](./NodeModel.zh.md) +::: -其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 + diff --git a/packages/site/docs/apis/data/NodeModel.en.md b/packages/site/docs/apis/data/NodeModel.en.md index 7e43c428c80..0cdf3cee0b4 100644 --- a/packages/site/docs/apis/data/NodeModel.en.md +++ b/packages/site/docs/apis/data/NodeModel.en.md @@ -1,150 +1,16 @@ --- title: NodeModel -order: 6 +order: 4 --- -NodeModel represents the internal data of a node that flows within the graph instance. It is derived from [`NodeUserModel`](./NodeUserModel.zh.md) through calculations performed on the graph instance. This data is consumed in any subsequent usage. Each node item inherits from [`NodeUserModel`](./NodeUserModel.zh.md) and is defined as follows: +NodeModel is the node data that flows internally, which is obtained by [NodeUserModel](./NodeUserModel.en.md) through [data transforms](./DataIntro.en.md#transforms). -```typescript -interface NodeModel { - id: string | number; - data: NodeModelData; // = NodeModelData -} -``` + -## id + -The unique ID of the node. Once the node is created, the ID cannot be modified. +## data Required -- **Required**: True; -- **Type**: `string|number` + -## data - -The data in InnerModelData is the result of applying a series of transforms on UserModelData through the graph instance. The business data may have been transformed, filtered, or merged. - -- **Required**: True; -- **Type**: `NodeModelData`, Same as [`NodeUserModelData`](./NodeUserModel.zh.md#nodeusermodeldatatype), defined as follows: - -### NodeModelData.type - -The rendering type of the node. It can be a registered node type of the graph class. The built-in and default registered types are `'circle-node'`, `'rect-node'`, and `'image-node'`. `'circle-node'` by default. - -- **Required**: False; -- **Type**: `string`; - -### NodeModelData.x - -The x-axis position of the node. If the node position is not specified and the `layout` is not configured for the graph instance, the node may be rendered in the top-left corner of the canvas. - -- **Required**: False; -- **Type**: `number`; - -### NodeModelData.y - -The y-axis position of the node. If the node position is not specified and the `layout` is not configured for the graph instance, the node may be rendered in the top-left corner of the canvas. - -- **Required**: False; -- **Type**: `number`; - -### NodeModelData.z - -For 2D graphs, the z-value does not need to be specified. If specified, it may cause nodes to be invisible under the WebGL renderer. In 3D graphs, the z-value is required and represents the node's z-axis position. If the node position is not specified and the `layout` is not configured for the graph instance, the node may be rendered in the top-left corner of the canvas. - -- **Required**: False; -- **Type**: `number`; - -### NodeModelData.visible - -Whether the node is visible by default. - -- **Required**: False; -- **Type**: `boolean`; - -### NodeModelData.color - -The theme color of the main graph (keyShape) of the node, represented as a hexadecimal string. This is provided for convenient simple configuration, and more style configurations should be done in the node mapper of the graph instance, configuring the keyShape and various graphical styles. - -- **Required**: False; -- **Type**: `string`; - -### NodeModelData.label - -The text content of the labelShape of the node. This is provided for convenient simple configuration, and more style configurations should be done in the node mapper of the graph instance, configuring the text value of the labelShape or other graphical styles. - -- **Required**: False; -- **Type**: `string`; - -### NodeModelData.badges - -The configuration of badges around the node. The configurable positions `BadgePosition` are as follows. This is provided for convenient simple configuration, and more style configurations should be done in the node mapper of the graph instance, configuring the graphical styles of badgeShapes. - -- **Required**: False; -- **Type**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // required when type is 'text' - text?: string, // required when type is 'icon' -}[]; -``` - -```typescript -BadgePosition: 'rightTop' | - 'right' | - 'rightBottom' | - 'bottomRight' | - 'bottom' | - 'bottomLeft' | - 'leftBottom' | - 'left' | - 'leftTop' | - 'topLeft' | - 'top' | - 'topRight'; -``` - -### NodeModelData.icon - -The configuration of the central icon of the node. This is provided for convenient simple configuration, and more style configurations should be done in the node mapper of the graph instance, configuring the graphical styles of the iconShape. - -- **Required**: False; -- **Type**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // required when type is 'text' - text?: string, // required when type is 'icon' -} -``` - -### NodeModelData.anchorPoints - -The positions at which the edges are connected to the node, also known as the entry points of the edges. If not configured, the edges will automatically find the nearest positions on the node's edge for connection. For example, `[[0,0.5],[1,0.5]]`, where the numbers represent the percentage positions relative to the node's main graph (keyShape) in the x or y direction. This is provided for convenient simple configuration, and more style configurations should be done in the node mapper of the graph instance, configuring the graphical styles of anchorShapes. - -- **Required**: False; -- **Type**: `number[][]`; - -### NodeModelData.parentId - -For graphs with combos, it represents the ID of the combo to which the node belongs. - -- **Required**: False; -- **Type**: `string | number`; - -### NodeModelData.isRoot - -If you want to display this data as a tree graph and use a tree layout, specify whether this node is one of the root nodes of the tree. - -- **Required**: False; -- **Type**: `boolean`; - -### NodeModelData.preventPolylineEdgeOverlap - -Whether to treat this node as an obstacle for avoiding `'polyline-edge'` type edges. The default value is `false`. - -- **Required**: False; -- **Type**: `boolean`; + diff --git a/packages/site/docs/apis/data/NodeModel.zh.md b/packages/site/docs/apis/data/NodeModel.zh.md index 7da2a43a89a..798230dbe24 100644 --- a/packages/site/docs/apis/data/NodeModel.zh.md +++ b/packages/site/docs/apis/data/NodeModel.zh.md @@ -1,150 +1,16 @@ --- title: NodeModel 内部数据 -order: 6 +order: 4 --- -NodeModel 为内部流转的节点数据，由 NodeUserModel 经过皮质在图实例上的 transforms 计算而得。后续您在任意地方消费的都是这一份数据。每一项节点的类型继承自 [`NodeUserModel`](./NodeUserModel.zh.md)，扩展后定义如下： +NodeModel 为内部流转的节点数据，由 [NodeUserModel](./NodeUserModel.zh.md) 经过[数据转换](/apis/data/data-intro#transforms-数据转换)后得到。 -```typescript -interface NodeModel { - id: string | number; - data: NodeModelData; // = NodeModelData -} -``` + -## id + -节点的唯一 ID，节点创建后，ID 不可被修改。 +## data 必须 -- **是否必须**: 是； -- **类型**: `string|number` + -## data - -InnerModelData 中的数据已经是 UserModelData 通过 Graph 实例的一系列 transform 函数生成的结果，业务数据可能已经被转换、过滤、合并。 - -- **是否必须**: 是； -- **类型**: `NodeModelData`，同 [`NodeUserModelData`](./NodeUserModel.zh.md#nodeusermodeldatatype) 定义如下： - -### NodeModelData.type - -节点的渲染类型，可以是已经注册到图类上的节点类型，内置并默认注册的有 `'circle-node'`，`'rect-node'`，`'image-node'`。默认为 `'circle-node'`。 - -- **是否必须**: 否； -- **类型**: `string`； - -### NodeModelData.x - -节点的 x 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -- **是否必须**: 否； -- **类型**: `number`； - -### NodeModelData.y - -节点的 y 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -- **是否必须**: 否； -- **类型**: `number`； - -### NodeModelData.z - -对于 2D 的图，不需要指定 z 值。若指定可能导致 WebGL 渲染器下节点看不见。在 3D 图中，z 值是必须的，代表节点的 z 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -- **是否必须**: 否； -- **类型**: `number`； - -### NodeModelData.visible - -节点是否默认展示出来。 - -- **是否必须**: 否； -- **类型**: `boolean`； - -### NodeModelData.color - -该节点主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 keyShape 以及各种图形的图形样式。 - -- **是否必须**: 否； -- **类型**: `string`； - -### NodeModelData.label - -节点 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 labelShape 的 text 值或其他图形样式。 - -- **是否必须**: 否； -- **类型**: `string`； - -### NodeModelData.badges - -节点四周的徽标配置，其中的可配置的位置 `BadgePosition` 见后方。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 `badgeShapes` 的图形样式。 - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -}[]; -``` - -```typescript -BadgePosition: 'rightTop' | - 'right' | - 'rightBottom' | - 'bottomRight' | - 'bottom' | - 'bottomLeft' | - 'leftBottom' | - 'left' | - 'leftTop' | - 'topLeft' | - 'top' | - 'topRight'; -``` - -### NodeModelData.icon - -节点中心 icon 的配置。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 iconShape 的图形样式。 - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -} -``` - -### NodeModelData.anchorPoints - -该节点四周连接图形的位置，也是边连入的位置。若不配置，边则自动寻找节点边缘最近的位置进行连接。例如 `[[0,0.5],[1,0.5]]`，数字表示在 x 或 y 方向上相对于节点主图形（keyShape）的百分比位置。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 anchorShapes 的图形样式。 - -- **是否必须**: 否； -- **类型**: `number[][]`； - -### NodeModelData.parentId - -在有 combo 的图上表示该节点所属的 combo 的 id。 - -- **是否必须**: 否； -- **类型**: `string | number`； - -### NodeModelData.isRoot - -若要将该份数据作为树图展示，同时使用树图布局时，指定该节点是否为树的根节点之一。 - -- **是否必须**: 否； -- **类型**: `boolean`； - -### NodeModelData.preventPolylineEdgeOverlap - -是否将该节点作为一个障碍物，使 `'polyline-edge'` 类型的边躲避。默认为 `false`。 - -- **是否必须**: 否； -- **类型**: `boolean`； + diff --git a/packages/site/docs/apis/data/NodeUserModel.en.md b/packages/site/docs/apis/data/NodeUserModel.en.md index 53714532b47..de040e6b5d0 100644 --- a/packages/site/docs/apis/data/NodeUserModel.en.md +++ b/packages/site/docs/apis/data/NodeUserModel.en.md @@ -3,148 +3,23 @@ title: NodeUserModel order: 3 --- -The data part of each node model in the user input data is explained as follows. +The `nodes` part of the user input data. -```typescript -interface NodeUserModel { - id: string | number; - data: NodeUserModelData; -} -``` - -## id - -The unique ID of the node. Once the node is created, the ID cannot be changed. - -- **Required**: True; -- **Type**: `string|number`; - -## data - -The data of the node, excluding the ID. It is recommended to store business data. If data conversion is needed, it can be done through the transform function configured in the Graph instance, see [Specification.transforms](../graph/Specification.en.md#transforms). The converted data becomes the internal data that circulates within the graph. All subsequent accesses will be based on this internal data. For rendering-related data, it can be mapped using the node mapper of the Graph instance, see [Specification.node](../graph/Specification.en.md#node) The input of this mapper is the internal data, and the generated display data is only consumed by the renderer. Users will not obtain it anywhere. - -- **Required**: True; -- **Type**: [`NodeUserModelData`](#nodeusermodeldatatype); - -### NodeUserModelData.type - -Type: string The rendering type of the node. It can be a node type that has been registered with the graph class. Built-in and default registered types include `'circle-node'`, `'rect-node'`, and `'image-node'`. - -- **Required**: False; -- **Type**: `string`; - -### NodeUserModelData.x - -Type: number The x-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. - -- **Required**: False; -- **Type**: `number`; - -### NodeUserModelData.y - -The y-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. - -- **Required**: False; -- **Type**: `number`; - -### NodeUserModelData.z - -For 2D graphs, there is no need to specify the z value. If it is specified, it may cause the node to be invisible under the WebGL renderer. In 3D graphs, the z value is required and represents the z-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. - -- **Required**: False; -- **Type**: `number`; - -### NodeUserModelData.visible - -Whether the node is displayed by default. - -- **Required**: False; -- **Type**: `boolean`; - -### NodeUserModelData.color +An example of a data items: -The main color of the primary shape (keyShape) of the node, expressed as a hexadecimal string. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the keyShape and various graphic styles are configured. - -- **Required**: False; -- **Type**: `string`; - -### NodeUserModelData.label - -The text content of the label shape of the node. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the text value of the labelShape or other graphic styles are configured. - -- **Required**: False; -- **Type**: `string`; - -### NodeUserModelData.badges - -The configuration of the badges around the node. The possible positions `BadgePosition` are as follows. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the graphic styles of the badgeShapes are configured. - -- **Required**: False; -- **Type**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // required when type is 'text' - text?: string, // required when type is 'icon' -}[]; -``` - -```typescript -BadgePosition: 'rightTop' | - 'right' | - 'rightBottom' | - 'bottomRight' | - 'bottom' | - 'bottomLeft' | - 'leftBottom' | - 'left' | - 'leftTop' | - 'topLeft' | - 'top' | - 'topRight'; -``` - -### NodeUserModelData.icon - -The configuration of the central icon of the node. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the graphic styles of the iconShape are configured. - -- **Required**: False; -- **Type**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // required when type is 'text' - text?: string, // required when type is 'icon' -} +```json +[ + { "id": "node-1", "data": {} }, + { "id": "node-2", "data": {} } +] ``` -### NodeUserModelData.anchorPoints - -The positions where the edges are connected to the node. If not configured, the edges will automatically find the nearest positions on the edge of the node for connection. For example, `[[0,0.5],[1,0.5]]`, where the numbers indicate the percentage position relative to the primary shape (keyShape) of the node in the x or y direction. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the graphic styles of the anchorShapes are configured. - -- **Required**: False; -- **Type**: `number[][]`; - -### NodeUserModelData.parentId - -In a graph with combos, it indicates the ID of the combo to which the node belongs. - -- **Required**: False; -- **Type**: `string | number`; - -### NodeUserModelData.isRoot - -If you want to display the data as a tree diagram and use tree layout at the same time, specify whether this node is one of the root nodes of the tree. + -- **Required**: False; -- **Type**: `boolean`; +## data Required -### NodeUserModelData.preventPolylineEdgeOverlap +The data of the node -Whether to treat this node as an obstacle and make it avoid the `'polyline-edge'` type of edges. The default value is `false`. + -- **Required**: False; -- **Type**: `boolean`; + diff --git a/packages/site/docs/apis/data/NodeUserModel.zh.md b/packages/site/docs/apis/data/NodeUserModel.zh.md index 25c6f54b7bc..609433d1d6b 100644 --- a/packages/site/docs/apis/data/NodeUserModel.zh.md +++ b/packages/site/docs/apis/data/NodeUserModel.zh.md @@ -3,148 +3,23 @@ title: NodeUserModel 输入数据 order: 3 --- -用户输入数据中，每一项节点类型： +用户输入数据中的 `nodes` 部分内容。 -```typescript -interface NodeUserModel { - id: string | number; - data: NodeUserModelData; -} -``` - -## id - -节点的唯一 ID，节点创建后，ID 不可被修改。 - -- **是否必须**: 是； -- **类型**: `string|number` - -## data - -节点除 ID 以外的的数据，建议存放业务数据。若需要进行数据转换，可通过 Graph 实例的 transform 配置转换函数，见 [Specification.transforms](../graph/Specification.zh.md#transforms)。转换后的数据成为内部流通的数据 Inner Data，后续所有地方获取的都是这份内部数据。与渲染有关的可以通过 Graph 实例的节点 mapper 进行映射，见 [Specification.node](../graph/Specification.zh.md#node)，该 mapper 的输入是 Inner Data，生成的结果 Display Data 只交给渲染器消费，用户不会在任何地方获得。 - -- **是否必须**: 是； -- **类型**: [`NodeUserModelData`](#nodeusermodeldatatype)，详细见下文 - -### NodeUserModelData.type - -节点的渲染类型，可以是已经注册到图类上的节点类型，内置并默认注册的有 `'circle-node'`，`'rect-node'`，`'image-node'`。 - -- **是否必须**: 否； -- **类型**: `string`； - -### NodeUserModelData.x - -节点的 x 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -- **是否必须**: 否； -- **类型**: `number`； - -### NodeUserModelData.y - -节点的 y 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -- **是否必须**: 否； -- **类型**: `number`； - -### NodeUserModelData.z - -对于 2D 的图，不需要指定 z 值。若指定可能导致 WebGL 渲染器下节点看不见。在 3D 图中，z 值是必须的，代表节点的 z 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 - -- **是否必须**: 否； -- **类型**: `number`； - -### NodeUserModelData.visible - -节点是否默认展示出来。 - -- **是否必须**: 否； -- **类型**: `boolean`； - -### NodeUserModelData.color +下面是数据实例： -该节点主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 keyShape 以及各种图形的图形样式。 - -- **是否必须**: 否； -- **类型**: `string`； - -### NodeUserModelData.label - -节点 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 labelShape 的 text 值或其他图形样式。 - -- **是否必须**: 否； -- **类型**: `string`； - -### NodeUserModelData.badges - -节点四周的徽标配置，其中的可配置的位置 `BadgePosition` 如下。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 badgeShapes 的图形样式。 - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - position: BadgePosition, - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -}[]; -``` - -```typescript -BadgePosition: 'rightTop' | - 'right' | - 'rightBottom' | - 'bottomRight' | - 'bottom' | - 'bottomLeft' | - 'leftBottom' | - 'left' | - 'leftTop' | - 'topLeft' | - 'top' | - 'topRight'; -``` - -### NodeUserModelData.icon - -节点中心 icon 的配置。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 iconShape 的图形样式。 - -- **是否必须**: 否； -- **类型**: - -```typescript -{ - type: 'text' | 'icon', - img?: string, // type 为 'text' 时需要提供 - text?: string, // type 为 'icon' 时需要提供 -} +```json +[ + { "id": "node-1", "data": {} }, + { "id": "node-2", "data": {} } +] ``` -### NodeUserModelData.anchorPoints - -该节点四周连接图形的位置，也是边连入的位置。若不配置，边则自动寻找节点边缘最近的位置进行连接。例如 `[[0,0.5],[1,0.5]]`，数字表示在 x 或 y 方向上相对于节点主图形（keyShape）的百分比位置。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 anchorShapes 的图形样式。 - -- **是否必须**: 否； -- **类型**: `number[][]`； - -### NodeUserModelData.parentId - -在有 combo 的图上表示该节点所属的 combo 的 id。 - -- **是否必须**: 否； -- **类型**: `string | number`； - -### NodeUserModelData.isRoot - -若要将该份数据作为树图展示，同时使用树图布局时，指定该节点是否为树的根节点之一。 + -- **是否必须**: 否； -- **类型**: `boolean`； +## data 必须 -### NodeUserModelData.preventPolylineEdgeOverlap +节点数据 -是否将该节点作为一个障碍物，使 `'polyline-edge'` 类型的边躲避。默认为 `false`。 + -- **是否必须**: 否； -- **类型**: `boolean`； + diff --git a/packages/site/docs/apis/data/TreeData.en.md b/packages/site/docs/apis/data/TreeData.en.md index 091cfaca9d1..06898d90c1f 100644 --- a/packages/site/docs/apis/data/TreeData.en.md +++ b/packages/site/docs/apis/data/TreeData.en.md @@ -3,29 +3,50 @@ title: TreeData order: 2 --- -The TreeData type is the type of tree graph data, which is one of the data types accepted by the Graph class. In version 5, the Graph and TreeGraph are connected, meaning that the same Graph class can read both the [GraphData](./GraphData.en.md) format and the tree graph data format described in this document. `TreeGraph` is a nested data structure that represents the parent-child hierarchy of a tree. Unlike `GraphData`, `TreeData` does not explicitly define `edges` and does not have an `edges` array. Instead, the nested `children` implicitly represent the edges, meaning that there is an edge between parent and child nodes. - -In version 5, the Graph class can read `GraphData`, `TreeData`, and `TreeData[]`, which means it can display graph data, tree graph data, and forests of multiple trees. +A tree is a special graph, that is, a graph without a cycle. Tree data (TreeData) does not explicitly define edges, but implicitly represents edges through nested `children`, that is, there is an edge between parent and child nodes. + +An example of a tree data is as follows: + +```json +{ + "id": "root", + "data": {}, + "children": [ + { + "id": "node-1", + "data": {}, + "children": [ + { + "id": "node-1-1", + "data": {}, + "children": [ + { + "id": "node-1-1-1", + "data": {}, + "children": [] + } + ] + } + ] + } + ] +} +``` + +G6 5.0 can read `TreeData`, `TreeData[]`, that is, **tree** and **forest**. ## Properties -### id - -- Required: Yes; -- Type: `string | number`; - -The unique ID of the node. Once the node is created, the ID cannot be modified. + -### data +### data Required -- Required: Yes; -- Type: [`NodeUserModelData`](./NodeUserModelData.en.md); +**Type**: [NodeUserModelData](./NodeUserModelData.en.md); -The data of the node, excluding the ID. It is recommended to store business data in this property. If data transformation is needed, it can be done through the transform configuration of the Graph instance, see [Specification.transforms](../graph/Specification.en.md#transforms). The transformed data becomes the internal circulating data (Inner Data), and all subsequent accesses will obtain this internal data. Mapping related to rendering can be done through the node mapper of the Graph instance, see [Specification.node](../graph/Specification.en.md#node). The input of this mapper is the Inner Data, and the generated Display Data is only consumed by the renderer. Users will not get it anywhere. +The data of the node ### children -- Required: False; -- Type: `TreeData`; +**Type**: `TreeData` -The array of child nodes of this node. It is a nested `TreeData` format node. +The array of child nodes of the current node diff --git a/packages/site/docs/apis/data/TreeData.zh.md b/packages/site/docs/apis/data/TreeData.zh.md index c23961f6684..89552e5b5af 100644 --- a/packages/site/docs/apis/data/TreeData.zh.md +++ b/packages/site/docs/apis/data/TreeData.zh.md @@ -3,29 +3,50 @@ title: TreeData order: 2 --- -本章介绍的 TreeData 是树图数据的类型，即是 Graph 接收的数据类型之一。是 Graph 接收的数据类型。v5 打通了 Graph 和 TreeGraph，即使用同一个 Graph 类，即可以读取 [GraphData](./GraphData.zh.md) 数据格式，也可以读取本文中的树图的数据格式。`TreeGraph` 是一个嵌套的数据结构，表达了树的父子层级。不像 `GraphData`，`TreeData` 不显式定义边，没有 `edges` 数组，其中 `children` 的嵌套隐式表示了边，即父子节点之间存在一条边。 - -v5 的 Graph 可以读取 `GraphData`、`TreeData`、`TreeData[]`，即可以展示图数据、树图数据、多棵树的森林数据。 +树是一种特殊的图，即不存在环的图。树数据（TreeData）不显式定义边，而是通过嵌套的 `children` 隐式表示边，即父子节点之间存在一条边。 + +一个树数据的示例如下： + +```json +{ + "id": "root", + "data": {}, + "children": [ + { + "id": "node-1", + "data": {}, + "children": [ + { + "id": "node-1-1", + "data": {}, + "children": [ + { + "id": "node-1-1-1", + "data": {}, + "children": [] + } + ] + } + ] + } + ] +} +``` + +G6 5.0 可以读取 `TreeData`、`TreeData[]`，即**树**和**森林**。 ## 属性 -### id - -- 是否必须：`是`； -- 类型： `string | number`； - -节点的唯一 ID，节点创建后，ID 不可被修改。 + -### data +### data 必须 -- 是否必须：`是`； -- 类型：[`NodeUserModelData`](./NodeUserModel.zh.md#nodeusermodeldatatype)； +**类型**：[NodeUserModelData](./NodeUserModel.zh.md#nodeusermodeldatatype) -节点除 ID 以外的的数据，建议存放业务数据。若需要进行数据转换，可通过 Graph 实例的 transform 配置转换函数，见 [Specification.transforms](../graph/Specification.zh.md#transforms)。转换后的数据成为内部流通的数据 Inner Data，后续所有地方获取的都是这份内部数据。与渲染有关的可以通过 Graph 实例的节点 mapper 进行映射，见 [Specification.node](../graph/Specification.zh.md#node)，该 mapper 的输入是 Inner Data，生成的结果 Display Data 只交给渲染器消费，用户不会在任何地方获得。 +节点数据 ### children -- 是否必须：`否`； -- 类型：`TreeData`； +**类型**：`TreeData` -该节点的子节点数组。嵌套的 `TreeData` 格式的节点。 +当前节点的子节点数组 diff --git a/packages/site/docs/apis/data/WIP-CustomTransform.en.md b/packages/site/docs/apis/data/WIP-CustomTransform.en.md deleted file mode 100644 index 1681b460086..00000000000 --- a/packages/site/docs/apis/data/WIP-CustomTransform.en.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Custom Transform -order: 13 ---- diff --git a/packages/site/docs/apis/item/combo/ComboIntro.en.md b/packages/site/docs/apis/item/combo/ComboIntro.en.md index 5e8c367eb2d..dfab6ed1929 100644 --- a/packages/site/docs/apis/item/combo/ComboIntro.en.md +++ b/packages/site/docs/apis/item/combo/ComboIntro.en.md @@ -3,6 +3,28 @@ title: Overview order: 0 --- +Combo is a special type of node in G6, which can contain multiple nodes and edges, and can be used to represent a complex node. + +## Composition of Combo + +In G6, a Combo is usually composed of `keyShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, `badgeShapes`, and `otherShapes`. + +- `keyShape`: The main shape of the Combo, usually used to represent the main shape of the Combo, and also used to calculate the incoming position of the Combo. + +- `labelShape`: The text label shape of the Combo, usually used to display the name or description of the Combo. + +- `labelBackgroundShape`: The text label background shape of the Combo, usually used to provide a background color for the text label. + +- `iconShape`: The icon shape of the Combo, usually used to display the icon of the Combo. + +- `badgeShapes`: The badge shape of the Combo, usually used to display the badge of the Combo. + +- `otherShapes`: Other shapes of the Combo, usually used to display other information or status of the Combo. + +Taking the circular Combo as an example, its main shape is a [circle](/en/apis/shape/circle-style-props): + +node sketch + ## Registration and Usage of Combos This directory lists all the built-in Combos in G6. G6 registers `circle-combo` and `rect-combo` by default. Additionally, to use a custom Combo, it needs to be registered: diff --git a/packages/site/docs/apis/item/combo/ComboIntro.zh.md b/packages/site/docs/apis/item/combo/ComboIntro.zh.md index 99cb0f568c6..8ddb34be65e 100644 --- a/packages/site/docs/apis/item/combo/ComboIntro.zh.md +++ b/packages/site/docs/apis/item/combo/ComboIntro.zh.md @@ -3,6 +3,28 @@ title: 概述 order: 0 --- +Combo 是 G6 中的一种特殊的节点，它可以包含多个节点和边，可以用来表示一个复杂的节点。 + +## Combo 构成 + +在 G6 中，Combo 通常由 `keyShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`badgeShapes` 和 `otherShapes` 构成。 + +- `keyShape`：Combo 的主图形，通常用于表示 Combo 的主要形状，同时也用于计算 Combo 的入射位置。 + +- `labelShape`：Combo 的文本标签形状，通常用于展示 Combo 的名称或描述。 + +- `labelBackgroundShape`：Combo 的文本标签背景形状，通常用于为文本标签提供背景色。 + +- `iconShape`：Combo 的图标形状，通常用于展示 Combo 的图标。 + +- `badgeShapes`：Combo 的徽标形状，通常用于展示 Combo 的徽标。 + +- `otherShapes`：Combo 的其他形状，通常用于展示 Combo 的其他信息或状态。 + +下面以圆形 Combo 为例，其主图形是一个[圆形](/apis/shape/circle-style-props)： + +node sketch + ## Combo 的注册和使用 本目录列举了 G6 内置的所有 Combo。G6 默认注册了 `circle-combo` 和 `rect-combo`。此外，自定义 Combo 需注册： diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.en.md b/packages/site/docs/apis/item/edge/EdgeIntro.en.md index 46ad0ded1cf..5eee3e98e3a 100644 --- a/packages/site/docs/apis/item/edge/EdgeIntro.en.md +++ b/packages/site/docs/apis/item/edge/EdgeIntro.en.md @@ -3,6 +3,24 @@ title: Overview order: 0 --- +## Composition of Edge + +In G6, an edge is usually composed of `keyShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, and `otherShapes`. + +- `keyShape`: The main shape of the edge, usually used to represent the main shape of the edge, and also used to calculate the incoming position of the edge. + +- `labelShape`: The text label shape of the edge, usually used to display the name or description of the edge. + +- `labelBackgroundShape`: The text label background shape of the edge, usually used to provide a background color for the text label. + +- `iconShape`: The icon shape of the edge, usually used to display the icon of the edge. + +- `otherShapes`: Other shapes of the edge, usually used to display other information or status of the edge. + +Taking the polyline edge as an example, its main shape is a [polyline](/en/apis/shape/polyline-style-props): + +node sketch + ## Registration and Use of Edges This directory lists all the built-in edges in G6. To reduce the package size, G6 5.0 only registers `line-edge` and `loop-edge` by default. **Therefore, before using these built-in edges, you also need to register them in G6.** Similarly, custom edges should be registered as follows: @@ -24,10 +42,10 @@ const graph = new Graph({ * ...other configuration options */ edge: { - type: 'cubic-edge' + type: 'cubic-edge', /** * type corresponds to the key named at registration - */, + */ /** * ... see specific edge configurations for other edge options */ diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md b/packages/site/docs/apis/item/edge/EdgeIntro.zh.md index b5ebbe95dee..7e140f64b6b 100644 --- a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md +++ b/packages/site/docs/apis/item/edge/EdgeIntro.zh.md @@ -3,6 +3,24 @@ title: 概述 order: 0 --- +## 边构成 + +在 G6 中，边通常由 `keyShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`otherShapes` 构成。 + +- `keyShape`：边的主图形，通常用于表示边的主要形状，同时也用于计算边的入射位置。 + +- `labelShape`：边的文本标签形状，通常用于展示边的名称或描述。 + +- `labelBackgroundShape`：边的文本标签背景形状，通常用于为文本标签提供背景色。 + +- `iconShape`：边的图标形状，通常用于展示边的图标。 + +- `otherShapes`：边的其他形状，通常用于展示边的其他信息或状态。 + +以折线边为例，其主图形为一个[折线](/apis/shape/polyline-style-props)： + +node sketch + ## 边的注册和使用 本目录列举了 G6 内置的所有边。G6 5.0 为了减少包体积，仅默认注册了 `line-edge` 和 `loop-edge`。**因此，在使用这些内置节点之前，您也需要将其注册到 G6 中**。同样的，自定义节点也应当如下注册： @@ -24,10 +42,10 @@ const graph = new Graph({ * ...其他配置项 */ edge: { - type: 'cubic-edge' + type: 'cubic-edge', /** * type 与注册时命名的 key 一致 - */, + */ /** * ... 边的其他配置项详见具体边配置 */ diff --git a/packages/site/docs/apis/item/node/NodeIntro.en.md b/packages/site/docs/apis/item/node/NodeIntro.en.md index c1df14622aa..389a9434ced 100644 --- a/packages/site/docs/apis/item/node/NodeIntro.en.md +++ b/packages/site/docs/apis/item/node/NodeIntro.en.md @@ -3,6 +3,30 @@ title: Overview order: 0 --- +## Composition of Node + +In G6, a node is usually composed of `keyShape`, `haloShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, `anchorShapes` and `otherShapes`. + +- `keyShape`: The main shape of the node, usually used to represent the main shape of the node, and also used to calculate the incoming position of the edge. + +- `haloShape`: The halo effect of the main shape (`keyShape`) of the node when the node is in `active` (such as **hover** state) and `selected` (such as **selected** state). + +- `labelShape`: The text label shape of the node, usually used to display the name or description of the node. + +- `labelBackgroundShape`: The text label background shape of the node, usually used to provide a background color for the text label. + +- `iconShape`: The icon shape of the node, usually used to display the icon of the node. + +- `badgeShapes`: The badge shape of the node, usually used to display the badge of the node. + +- `anchorShapes`: The circular shape (anchor) of the edge incoming position around the node, anchorShapes configures multiple anchors. [Node Anchor DEMO](/examples/item/defaultNodes/#circle) + +- `otherShapes`: Other shapes of the node, usually used to display other information or status of the node. + +Taking the circular node as an example, its key shape is a [circle](/en/apis/shape/circle-style-props): + +node sketch + ## Registration and Usage of Nodes This directory lists all built-in nodes in G6. To reduce package size, G6 version 5.0 only registers `circle-node` and `rect-node` by default. **Therefore, before using these built-in nodes, you need to register them in G6 as well.** Similarly, custom nodes should be registered as follows: diff --git a/packages/site/docs/apis/item/node/NodeIntro.zh.md b/packages/site/docs/apis/item/node/NodeIntro.zh.md index b541090ed3c..32ed381a6e2 100644 --- a/packages/site/docs/apis/item/node/NodeIntro.zh.md +++ b/packages/site/docs/apis/item/node/NodeIntro.zh.md @@ -3,6 +3,30 @@ title: 概述 order: 0 --- +## 节点构成 + +在 G6 中，节点通常由 `keyShape`、`haloShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`anchorShapes` 和 `otherShapes` 组成。 + +- `keyShape`：节点的主图形，通常用于表示节点的主要形状，也用于计算边的连入位置。 + +- `haloShape`：节点在 `active`（如**hover**状态）和 `selected`（如**选中**状态） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。 + +- `labelShape`：节点的文本标签图形，通常用于展示节点的名称或描述。 + +- `labelBackgroundShape`：节点的文本标签背景图形，通常用于为文本标签提供背景色。 + +- `iconShape`：节点的图标图形，通常用于展示节点的图标。 + +- `badgeShapes`：节点的徽标图形，通常用于展示节点的徽标。 + +- `anchorShapes`：节点四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle) + +- `otherShapes`：节点的其他图形，通常用于展示节点的其他信息或状态。 + +下面以圆形节点为例，其主图形是一个[圆形](/apis/shape/circle-style-props)： + +node sketch + ## 节点的注册和使用 本目录列举了 G6 内置的所有节点。G6 5.0 为了减少包体积，仅默认注册了 `circle-node` 和 `rect-node`。**因此，在使用这些内置节点之前，您也需要将其注册到 G6 中**。同样的，自定义节点也应当如下注册： diff --git a/packages/site/docs/common/ComboShapeStyles.en.md b/packages/site/docs/common/ComboShapeStyles.en.md index 080841b8e66..4dcda0e8323 100644 --- a/packages/site/docs/common/ComboShapeStyles.en.md +++ b/packages/site/docs/common/ComboShapeStyles.en.md @@ -17,10 +17,10 @@ type LabelShapeStyle = TextStyleProps & { | 'left' | 'right' | 'left-top' - | 'ouside-top' - | 'ouside-left' - | 'ouside-right' - | 'ouside-bottom'; + | 'outside-top' + | 'outside-left' + | 'outside-right' + | 'outside-bottom'; /** * The offset of the text shape from the key shape (keyShape) in the x-direction. */ @@ -86,7 +86,7 @@ The related shape style can be referred to as RectStyleProps [`RectStyleProps`]( -**Default**: undefined +**Default**: `undefined` The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape. @@ -106,7 +106,7 @@ type HaloShapeStyle = ShapeStyle; -**Default**: undefined +**Default**: `undefined` In the built-in Combo and themes, `haloShape` refers to the halo effect displayed around the key shape (`keyShape`) of the Combo in the `active` state (usually triggered when the mouse hovers) and `selected` state (usually triggered when selected). In the logic of the built-in Combo, the type and color of the `haloShape` follow the key shape (`keyShape`). @@ -169,7 +169,7 @@ type BadgeShapesStyle = { -**Default**: undefined +**Default**: `undefined` The badges on the four sides of the Combo, where a single badge includes the Combo and background shape. `badgeShapes` configures multiple badges. @@ -202,7 +202,7 @@ The style of the anchor shapes can be referred to as [CircleStyleProps](../shape -**Default**: undefined +**Default**: `undefined` The circular shapes (anchor shapes) at the four sides of the Combo represent the entry points for connections. The anchorShapes configuration specifies multiple anchor shapes. @@ -228,6 +228,6 @@ The style configurations for different shapes can be referred to in the correspo -**Default**: undefined +**Default**: `undefined` The xxShape(s) mentioned above are the predefined shapes in the G6 Combo specification. Other custom shapes in the Combo should be defined and configured in `otherShapes`. diff --git a/packages/site/docs/common/ComboShapeStyles.zh.md b/packages/site/docs/common/ComboShapeStyles.zh.md index 6bf539a295e..cd03fa2403c 100644 --- a/packages/site/docs/common/ComboShapeStyles.zh.md +++ b/packages/site/docs/common/ComboShapeStyles.zh.md @@ -17,10 +17,10 @@ type LabelShapeStyle = TextStyleProps & { | 'left' | 'right' | 'left-top' - | 'ouside-top' - | 'ouside-left' - | 'ouside-right' - | 'ouside-bottom'; + | 'outside-top' + | 'outside-left' + | 'outside-right' + | 'outside-bottom'; /** * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 */ @@ -82,7 +82,7 @@ type LabelBackgroundShapeStyle = ShapeStyle & { -**默认值**：undefined +**默认值**：`undefined` Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 @@ -102,7 +102,7 @@ type HaloShapeStyle = ShapeStyle; -**默认值**：undefined +**默认值**：`undefined` 在内置的 Combo 和主题中，`haloShape` 指的是 Combo 在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 @@ -167,7 +167,7 @@ type BadgeShapesStyle = { -**默认值**：undefined +**默认值**：`undefined` Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。 @@ -200,7 +200,7 @@ type AnchorShapesStyle = StyleProps & { -**默认值**：undefined +**默认值**：`undefined` Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。 @@ -224,6 +224,6 @@ type OtherShapeStyle = { -**默认值**：undefined +**默认值**：`undefined` 上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/ComboUserModel.en.md b/packages/site/docs/common/ComboUserModel.en.md new file mode 100644 index 00000000000..69eb9c9bfd9 --- /dev/null +++ b/packages/site/docs/common/ComboUserModel.en.md @@ -0,0 +1,31 @@ +### type + +**Type**: `string` + +The rendering type of the combo, which can be a combo type registered on the graph class. The built-in and default registered types are `'circle-combo'` and `'rect-combo'`. The default is `'circle-combo'`. + +### visible + +**Type**: `boolean` + +Whether the combo is displayed by default. + +### color + +**Type**: `string` + +The theme color of the key shape (`keyShape`) of the combo, with a value in hexadecimal string format. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including keyShape and various shape styles. + +### label + +**Type**: `string` + +The text content of the `labelShape` of the combo. More style configurations should be configured in the Combo mapper of the graph instance, including the `text` value of `labelShape` or other shape styles. + + + +### parentId + +**Type**: `string | number` + +The ID of the parent combo to which the combo belongs. `undefined` means it is a root. diff --git a/packages/site/docs/common/ComboUserModel.zh.md b/packages/site/docs/common/ComboUserModel.zh.md new file mode 100644 index 00000000000..7589303ef5b --- /dev/null +++ b/packages/site/docs/common/ComboUserModel.zh.md @@ -0,0 +1,31 @@ +### type + +**类型**： `string` + +Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。默认为 `'circle-combo'`。 + +### visible + +**类型**： `boolean` + +Combo 是否默认展示出来。 + +### color + +**类型**： `string` + +该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 + +### label + +**类型**： `string` + +Combo `labelShape` 的文本内容。更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 `labelShape` 的 `text` 值或其他图形样式。 + + + +### parentId + +**类型**： `string | number` + +在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。`undefined` 表示当前 Combo 是一个根。 diff --git a/packages/site/docs/common/DataAnchorShapes.en.md b/packages/site/docs/common/DataAnchorShapes.en.md new file mode 100644 index 00000000000..8b01366c936 --- /dev/null +++ b/packages/site/docs/common/DataAnchorShapes.en.md @@ -0,0 +1,24 @@ +### anchorShapes + +**Type**: `AnchorShapes` + +
+ + AnchorShapes + + +```ts +type AnchorShapes = CircleStyleProps & { + // Individual anchor shape configurations, with higher priority than the outer CircleStyleProps. + [key: number]: CircleStyleProps & { + // The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape. + position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; + }; +}; +``` + +
+ +- [CircleStyleProps](/en/apis/shape/circle-style-props) + +The shape of connecting ports diff --git a/packages/site/docs/common/DataAnchorShapes.zh.md b/packages/site/docs/common/DataAnchorShapes.zh.md new file mode 100644 index 00000000000..6220223f0d2 --- /dev/null +++ b/packages/site/docs/common/DataAnchorShapes.zh.md @@ -0,0 +1,24 @@ +### anchorShapes + +**类型**：`AnchorShapes` + +
+ + AnchorShapes + + +```ts +type AnchorShapes = CircleStyleProps & { + // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps + [key: number]: CircleStyleProps & { + // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 + position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; + }; +}; +``` + +
+ +- [CircleStyleProps](/apis/shape/circle-style-props) + +连接桩形状 diff --git a/packages/site/docs/common/DataAnimates.en.md b/packages/site/docs/common/DataAnimates.en.md new file mode 100644 index 00000000000..87778f70f68 --- /dev/null +++ b/packages/site/docs/common/DataAnimates.en.md @@ -0,0 +1,7 @@ +### animates + +**Type**: `IAnimates` + + + +Configuration of shape animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). diff --git a/packages/site/docs/common/DataAnimates.zh.md b/packages/site/docs/common/DataAnimates.zh.md new file mode 100644 index 00000000000..5353179693e --- /dev/null +++ b/packages/site/docs/common/DataAnimates.zh.md @@ -0,0 +1,7 @@ +### animates + +**类型**：`IAnimates` + + + +出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates) diff --git a/packages/site/docs/common/DataAttrTips.en.md b/packages/site/docs/common/DataAttrTips.en.md new file mode 100644 index 00000000000..8f35cbfdf48 --- /dev/null +++ b/packages/site/docs/common/DataAttrTips.en.md @@ -0,0 +1,3 @@ +:::info +The following content is the sub-properties of `data` +::: diff --git a/packages/site/docs/common/DataAttrTips.zh.md b/packages/site/docs/common/DataAttrTips.zh.md new file mode 100644 index 00000000000..a752c8bb428 --- /dev/null +++ b/packages/site/docs/common/DataAttrTips.zh.md @@ -0,0 +1,3 @@ +:::info{title=提示} +下方内容为 `data` 子属性 +::: \ No newline at end of file diff --git a/packages/site/docs/common/DataBadge.en.md b/packages/site/docs/common/DataBadge.en.md new file mode 100644 index 00000000000..0e1137377fe --- /dev/null +++ b/packages/site/docs/common/DataBadge.en.md @@ -0,0 +1,17 @@ +
+ + Badges + + +```ts +type Badge = { + position: BadgePosition; + type: 'text' | 'icon'; + img?: string; // required when type is 'text' + text?: string; // required when type is 'icon' +}; +``` + + + +
diff --git a/packages/site/docs/common/DataBadge.zh.md b/packages/site/docs/common/DataBadge.zh.md new file mode 100644 index 00000000000..d12ce17b890 --- /dev/null +++ b/packages/site/docs/common/DataBadge.zh.md @@ -0,0 +1,17 @@ +
+ + Badges + + +```ts +type Badge = { + position: BadgePosition; + type: 'text' | 'icon'; + img?: string; // type 为 'text' 时需要提供 + text?: string; // type 为 'icon' 时需要提供 +}; +``` + + + +
\ No newline at end of file diff --git a/packages/site/docs/common/DataBadgePosition.en.md b/packages/site/docs/common/DataBadgePosition.en.md new file mode 100644 index 00000000000..d2ccbc4f149 --- /dev/null +++ b/packages/site/docs/common/DataBadgePosition.en.md @@ -0,0 +1,15 @@ +```ts +type BadgePosition = + | 'rightTop' + | 'right' + | 'rightBottom' + | 'bottomRight' + | 'bottom' + | 'bottomLeft' + | 'leftBottom' + | 'left' + | 'leftTop' + | 'topLeft' + | 'top' + | 'topRight'; +``` diff --git a/packages/site/docs/common/DataBadgePosition.zh.md b/packages/site/docs/common/DataBadgePosition.zh.md new file mode 100644 index 00000000000..d2ccbc4f149 --- /dev/null +++ b/packages/site/docs/common/DataBadgePosition.zh.md @@ -0,0 +1,15 @@ +```ts +type BadgePosition = + | 'rightTop' + | 'right' + | 'rightBottom' + | 'bottomRight' + | 'bottom' + | 'bottomLeft' + | 'leftBottom' + | 'left' + | 'leftTop' + | 'topLeft' + | 'top' + | 'topRight'; +``` diff --git a/packages/site/docs/common/DataBadgeShapes.en.md b/packages/site/docs/common/DataBadgeShapes.en.md new file mode 100644 index 00000000000..44737553f2b --- /dev/null +++ b/packages/site/docs/common/DataBadgeShapes.en.md @@ -0,0 +1,34 @@ +### badgeShapes + +**Type**: `BadgeShapes` + +
+ + BadgeShapes + + +```ts +type BadgeShapes = { + /** The background color of the badge */ + color?: string; + /** The background color of the badge, which takes effect when color is not set */ + palette?: string[]; + /** The text color of the badge */ + textColor?: string; + /** The style configuration of a single badge, which has a higher priority than the above configuration */ + [key: number]: ShapeStyle & { + /** The position of this badge */ + position?: IBadgePosition; + /** The background color of this badge */ + color?: string; + /** The text color of this badge */ + textColor?: string; + }; +}; +``` + + + +
+ +The badges in the four corners, the badgeShapes configuration is multiple badges. diff --git a/packages/site/docs/common/DataBadgeShapes.zh.md b/packages/site/docs/common/DataBadgeShapes.zh.md new file mode 100644 index 00000000000..effa7b3ffd0 --- /dev/null +++ b/packages/site/docs/common/DataBadgeShapes.zh.md @@ -0,0 +1,34 @@ +### badgeShapes + +**类型**：`BadgeShapes` + +
+ + BadgeShapes + + +```ts +type BadgeShapes = { + /** 徽标的背景颜色 */ + color?: string; + /** 徽标背景颜色的色板，未设置 color 时生效 */ + palette?: string[]; + /** 徽标上文本的颜色 */ + textColor?: string; + /** 单个徽标的样式配置，优先级高于上面的配置 */ + [key: number]: ShapeStyle & { + /** 该徽标的位置，支持的取值见下文 */ + position?: IBadgePosition; + /** 该徽标的背景色 */ + color?: string; + /** 该徽标的文本色 */ + textColor?: string; + }; +}; +``` + + + +
+ +四周的徽标，badgeShapes 配置的是多个徽标。 diff --git a/packages/site/docs/common/DataBadges.en.md b/packages/site/docs/common/DataBadges.en.md new file mode 100644 index 00000000000..d3cb786b312 --- /dev/null +++ b/packages/site/docs/common/DataBadges.en.md @@ -0,0 +1,9 @@ +### badges + +**Type**: `Badge[]` + + + +The configuration of the badges around the node + +> More style configurations should be done in the node mapper of the graph instance, where the shape styles of the badgeShapes are configured diff --git a/packages/site/docs/common/DataBadges.zh.md b/packages/site/docs/common/DataBadges.zh.md new file mode 100644 index 00000000000..352b2013d55 --- /dev/null +++ b/packages/site/docs/common/DataBadges.zh.md @@ -0,0 +1,9 @@ +### badges + +**类型**：`Badge[]` + + + +节点四周的徽标配置 + +> 更多的样式配置应当在 Graph 实例的节点 mapper 中配置 `badgeShapes` 的图形样式 diff --git a/packages/site/docs/common/DataHaloShape.en.md b/packages/site/docs/common/DataHaloShape.en.md new file mode 100644 index 00000000000..c103aecff35 --- /dev/null +++ b/packages/site/docs/common/DataHaloShape.en.md @@ -0,0 +1,9 @@ +### haloShape + +**Type**: `ShapeStyleProps` + +- [ShapeStyleProps](/en/apis/shape/overview) + +The style configuration of the halo shape, the shape is the same as the main shape by default. + +> Usually, the halo effect is displayed around the key shape in the `active` and `selected` states. diff --git a/packages/site/docs/common/DataHaloShape.zh.md b/packages/site/docs/common/DataHaloShape.zh.md new file mode 100644 index 00000000000..51dd3adf571 --- /dev/null +++ b/packages/site/docs/common/DataHaloShape.zh.md @@ -0,0 +1,9 @@ +### haloShape + +**类型**：`ShapeStyleProps` + +- [ShapeStyleProps](/apis/shape/overview) + +光晕形状的样式配置，形状默认和主图形一致 + +> 通常在 `active` 和 `selected` 状态下，主图形周围会展示光晕效果。 diff --git a/packages/site/docs/common/DataID.en.md b/packages/site/docs/common/DataID.en.md new file mode 100644 index 00000000000..9bf46425f3d --- /dev/null +++ b/packages/site/docs/common/DataID.en.md @@ -0,0 +1,5 @@ +## id Required + +**Type**: `string | number` + +The unique ID of the element. Once the element is created, the ID cannot be changed. diff --git a/packages/site/docs/common/DataID.zh.md b/packages/site/docs/common/DataID.zh.md new file mode 100644 index 00000000000..80cadb6e3ca --- /dev/null +++ b/packages/site/docs/common/DataID.zh.md @@ -0,0 +1,5 @@ +## id 必须 + +**类型**：`string | number` + +元素的唯一 ID，元素创建后，ID 不可被修改。 diff --git a/packages/site/docs/common/DataIcon.en.md b/packages/site/docs/common/DataIcon.en.md new file mode 100644 index 00000000000..9b3637a656a --- /dev/null +++ b/packages/site/docs/common/DataIcon.en.md @@ -0,0 +1,22 @@ +### icon + +**Type**: `Icon` + +
+ + Icon + + +```ts +type Icon = { + type: 'text' | 'icon'; + img?: string; // Required when type is 'text' + text?: string; // Required when type is 'icon' +}; +``` + +
+ +The configuration of the icon + +> More style configurations should be configured in the Combo mapper of the graph instance, including the shape style of the iconShape diff --git a/packages/site/docs/common/DataIcon.zh.md b/packages/site/docs/common/DataIcon.zh.md new file mode 100644 index 00000000000..7b276ec737e --- /dev/null +++ b/packages/site/docs/common/DataIcon.zh.md @@ -0,0 +1,22 @@ +### icon + +**类型**：`Icon` + +
+ + Icon + + +```ts +type Icon = { + type: 'text' | 'icon'; + img?: string; // type 为 'text' 时需要提供 + text?: string; // type 为 'icon' 时需要提供 +}; +``` + +
+ +图标配置 + +> 更多的样式配置应当在 Graph 实例的 mapper 中配置 iconShape 的图形样式。 diff --git a/packages/site/docs/common/DataIconShape.en.md b/packages/site/docs/common/DataIconShape.en.md new file mode 100644 index 00000000000..b467e535857 --- /dev/null +++ b/packages/site/docs/common/DataIconShape.en.md @@ -0,0 +1,28 @@ +### iconShape + +**Type**: `IconShape` + +
+ + IconShape + + +```ts +type IconShape = Partial< + TextStyleProps & + ImageStyleProps & + ShapeStyle & { + offsetX?: number; + offsetY?: number; + lod?: number; + } +>; +``` + +
+ +- [TextStyleProps](/en/apis/shape/text-style-props) + +- [ImageStyleProps](/en/apis/shape/image-style-props) + +Icon Shape, can be an image or text, with text supporting [iconfont](/en/manual/advanced/iconfont) diff --git a/packages/site/docs/common/DataIconShape.zh.md b/packages/site/docs/common/DataIconShape.zh.md new file mode 100644 index 00000000000..c3747a6e6b5 --- /dev/null +++ b/packages/site/docs/common/DataIconShape.zh.md @@ -0,0 +1,28 @@ +### iconShape + +**类型**：`IconShape` + +
+ + IconShape + + +```ts +type IconShape = Partial< + TextStyleProps & + ImageStyleProps & + ShapeStyle & { + offsetX?: number; + offsetY?: number; + lod?: number; + } +>; +``` + +
+ +- [TextStyleProps](/apis/shape/text-style-props) + +- [ImageStyleProps](/apis/shape/image-style-props) + +图标图形，可以是图片或文本，文本支持 [iconfont](/manual/advanced/iconfont) diff --git a/packages/site/docs/common/DataInnerModelTips.en.md b/packages/site/docs/common/DataInnerModelTips.en.md new file mode 100644 index 00000000000..0d427c36ce6 --- /dev/null +++ b/packages/site/docs/common/DataInnerModelTips.en.md @@ -0,0 +1,3 @@ +:::info{title=TIPS} +This is the data you consume anywhere later. +::: \ No newline at end of file diff --git a/packages/site/docs/common/DataInnerModelTips.zh.md b/packages/site/docs/common/DataInnerModelTips.zh.md new file mode 100644 index 00000000000..5d5113aa910 --- /dev/null +++ b/packages/site/docs/common/DataInnerModelTips.zh.md @@ -0,0 +1,3 @@ +:::info{title=提示} +后续在任意地方使用的都是这一份数据 +::: diff --git a/packages/site/docs/common/DataLabelBackgroundShape.en.md b/packages/site/docs/common/DataLabelBackgroundShape.en.md new file mode 100644 index 00000000000..075ab862e50 --- /dev/null +++ b/packages/site/docs/common/DataLabelBackgroundShape.en.md @@ -0,0 +1,21 @@ +### labelBackgroundShape + +**Type**: `LabelBackgroundShape` + +
+ + LabelBackgroundShape + + +```ts +type LabelBackgroundShape = RectStyleProps & { + /** Inner padding of the background */ + padding?: number | number[]; +}; +``` + +
+ +- [RectStyleProps](/apis/shape/rect-style-props) + +The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape. diff --git a/packages/site/docs/common/DataLabelBackgroundShape.zh.md b/packages/site/docs/common/DataLabelBackgroundShape.zh.md new file mode 100644 index 00000000000..3488f617f93 --- /dev/null +++ b/packages/site/docs/common/DataLabelBackgroundShape.zh.md @@ -0,0 +1,21 @@ +### labelBackgroundShape + +**类型**：`LabelBackgroundShape` + +
+ + LabelBackgroundShape + + +```ts +type LabelBackgroundShape = RectStyleProps & { + /** 背景内边距 */ + padding?: number | number[]; +}; +``` + +
+ +- [RectStyleProps](/apis/shape/rect-style-props) + +文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 diff --git a/packages/site/docs/common/DataLabelShape.en.md b/packages/site/docs/common/DataLabelShape.en.md new file mode 100644 index 00000000000..d527d59df37 --- /dev/null +++ b/packages/site/docs/common/DataLabelShape.en.md @@ -0,0 +1,52 @@ +### labelShape + +**类型**：`LabelShape` + +
+ + LabelShape + + +```ts +type LabelShape = TextStyleProps & { + /** + * The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo. + */ + position?: + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'left-top' + | 'outside-top' + | 'outside-left' + | 'outside-right' + | 'outside-bottom'; + /** + * The offset of the text shape from the key shape (keyShape) in the x-direction. + */ + offsetX?: number; + /** + * The offset of the text shape from the key shape (keyShape) in the y-direction. + */ + offsetY?: number; + /** + * The offset of the text shape from the key shape (keyShape) in the z-direction. + */ + offsetZ?: number; + /** + * The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end. + */ + maxWidth?: string | number; + /** + * The rotation angle of the text (in radians). + */ + angle?: number; +}; +``` + +
+ +- [TextStyleProps](en/apis/shape/text-style-props) + +The text shape of the Combo, supported by built-in Combo or custom Combo that inherits the built-in Combo (without overriding related content) diff --git a/packages/site/docs/common/DataLabelShape.zh.md b/packages/site/docs/common/DataLabelShape.zh.md new file mode 100644 index 00000000000..c8720ebe9d8 --- /dev/null +++ b/packages/site/docs/common/DataLabelShape.zh.md @@ -0,0 +1,52 @@ +### labelShape + +**类型**：`LabelShape` + +
+ + LabelShape + + +```ts +type LabelShape = TextStyleProps & { + /** + * 文本相对于主图形 (keyShape) 的位置，可指定方位以及在内部或外部 + */ + position?: + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'left-top' + | 'outside-top' + | 'outside-left' + | 'outside-right' + | 'outside-bottom'; + /** + * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量 + */ + offsetX?: number; + /** + * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量 + */ + offsetY?: number; + /** + * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量 + */ + offsetZ?: number; + /** + * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...' + */ + maxWidth?: string | number; + /** + * 文本旋转角度（弧度制） + */ + angle?: number; +}; +``` + +
+ +- [TextStyleProps](/apis/shape/text-style-props) + +Combo 的文本图形，内置 Combo 或继承内置 Combo（未复写相关内容）的自定义 Combo 均支持 diff --git a/packages/site/docs/common/DataOtherShapes.en.md b/packages/site/docs/common/DataOtherShapes.en.md new file mode 100644 index 00000000000..bbf78488076 --- /dev/null +++ b/packages/site/docs/common/DataOtherShapes.en.md @@ -0,0 +1,21 @@ +### otherShapes + +**Type**: `OtherShapes` + +
+ + OtherShapes + + +```ts +type OtherShapes = { + // key is the shape id, with the format of xxShape + // value is the shape style configuration and animation configuration + [shapeId: string]: ShapeStyleProps; +} +``` +
+ +- [ShapeStyle](/en/apis/shape/overview) + +Shapes that may exist in custom nodes but not in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`. diff --git a/packages/site/docs/common/DataOtherShapes.zh.md b/packages/site/docs/common/DataOtherShapes.zh.md new file mode 100644 index 00000000000..b888176f7f2 --- /dev/null +++ b/packages/site/docs/common/DataOtherShapes.zh.md @@ -0,0 +1,21 @@ +### otherShapes + +**类型**：`OtherShapes` + +
+ + OtherShapes + + +```ts +type OtherShapes = { + // key 为图形 id，规范格式为 xxShape + // value 为图形样式、动画配置 + [shapeId: string]: ShapeStyleProps; +} +``` +
+ +- [图形样式](/apis/shape/overview) + +不在 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeShapeStyles.en.md b/packages/site/docs/common/EdgeShapeStyles.en.md index 184ad97dceb..2dbbaf24eb4 100644 --- a/packages/site/docs/common/EdgeShapeStyles.en.md +++ b/packages/site/docs/common/EdgeShapeStyles.en.md @@ -22,7 +22,7 @@ Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](. -**Default**: undefined +**Default**: `undefined` The icon shape of the edge (built-in edge support, custom edges that inherit these built-in edges also support it without overriding the relevant content). It is located in front of the text. It can be an image or text, and text supports iconfont. @@ -38,7 +38,7 @@ The icon shape of the edge (built-in edge support, custom edges that inherit the -**Default**: undefined +**Default**: `undefined` In built-in edges and themes, haloShape refers to the halo effect graphic displayed around the main graphic (keyShape) of the edge in active (usually triggered when the mouse hovers) and selected (usually triggered in the selected state) states. In the logic of built-in edges, the graphic type and color of haloShape follow the main graphic (keyShape). @@ -127,7 +127,7 @@ The related rectangle style type can be referred to in [`RectStyleProps`](../sha -**Default**: undefined +**Default**: `undefined` ## otherShapes @@ -155,4 +155,4 @@ The different shape styles can be referred to in the corresponding shape type do -**Default**: undefined +**Default**: `undefined` diff --git a/packages/site/docs/common/EdgeShapeStyles.zh.md b/packages/site/docs/common/EdgeShapeStyles.zh.md index 1b3247cc622..89dc03e0b32 100644 --- a/packages/site/docs/common/EdgeShapeStyles.zh.md +++ b/packages/site/docs/common/EdgeShapeStyles.zh.md @@ -28,7 +28,7 @@ type IconShapeStyle = Partial< -**默认值**：undefined +**默认值**：`undefined` 边的图标图形，位于文本前方。 @@ -44,7 +44,7 @@ type IconShapeStyle = Partial< -**默认值**：undefined +**默认值**：`undefined` 在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 @@ -131,7 +131,7 @@ type LabelShapeStyle = RectStyleProps & { -**默认值**：undefined +**默认值**：`undefined` 边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 @@ -159,6 +159,6 @@ type OtherShapesStyle = { -**默认值**：undefined +**默认值**：`undefined` 上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeUserModel.en.md b/packages/site/docs/common/EdgeUserModel.en.md new file mode 100644 index 00000000000..6eae196f96a --- /dev/null +++ b/packages/site/docs/common/EdgeUserModel.en.md @@ -0,0 +1,37 @@ +### type + +**Type**: `string` + +The rendering type of the edge, which can be a registered edge type on the graph, with the built-in and default registered types being `'line-edge'` and `'loop-edge'`. The default value is `'line-edge'`. + +### visible + +**Type**: `boolean` + +Whether the edge is displayed by default. + +### color + +**Type**: `string` + +The theme color of the main shape (keyShape) of the edge, with a value in hexadecimal string format. + +### label + +**Type**: `string` + +The text content of the `labelShape` of the edge. + + + +### sourceAnchor + +**Type**: `number` + +The `anchorPoints` on the source node indicate the allowed positions where related edges can connect, and is an array. The `sourceAnchor` of the edge indicates which anchor point to connect to when the edge connects to the starting point, corresponding to the index of the corresponding position in the `anchorPoints` of the source node. + +### targetAnchor + +**Type**: `number` + +The `anchorPoints` on the target node indicate the allowed positions where related edges can connect, and is an array. The `targetAnchor` of the edge indicates which anchor point to connect to when the edge connects to the ending point, corresponding to the index of the corresponding position in the `anchorPoints` of the target node. diff --git a/packages/site/docs/common/EdgeUserModel.zh.md b/packages/site/docs/common/EdgeUserModel.zh.md new file mode 100644 index 00000000000..13abb921798 --- /dev/null +++ b/packages/site/docs/common/EdgeUserModel.zh.md @@ -0,0 +1,37 @@ +### type + +**类型**：`string` + +边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。默认为 `'line-edge'`。 + +### visible + +**类型**：`boolean` + +边是否默认展示出来。 + +### color + +**类型**：`string` + +该边的主图形（keyShape）的主题色，值为十六进制字符串。 + +### label + +**类型**：`string` + +边 labelShape 的文本内容。 + + + +### sourceAnchor + +**类型**：`number` + +起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 + +### targetAnchor + +**类型**：`number` + +终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 diff --git a/packages/site/docs/common/IAnimates.en.md b/packages/site/docs/common/IAnimates.en.md new file mode 100644 index 00000000000..d981440c50e --- /dev/null +++ b/packages/site/docs/common/IAnimates.en.md @@ -0,0 +1,42 @@ +
+ + IAnimates + + +```ts +interface IAnimates { + /** Animations when certain graphics are created in the combo */ + buildIn?: IAnimate[]; + /** Animations when certain graphics are destroyed in the combo */ + buildOut?: IAnimate[]; + /** Animations when certain graphics transition from hidden to visible in the combo */ + show?: IAnimate[]; + /** Animations when certain graphics transition from visible to hidden in the combo */ + hide?: IAnimate[]; + /** Animations when certain graphics undergo data or state updates in the combo */ + update?: (IAnimate | IStateAnimate)[]; +} + +interface IAnimate { + /** The names of the graphic style properties related to this animation, for example ['fill', 'lineWidth'] */ + fields?: string[]; + /** The ID of the graphic on which the animation needs to be performed. If not specified, it represents the animation on the entire graphic group */ + shapeId?: string; + /** The order in which this animation is executed among IAnimate[], allowing for sequential playback of multiple animations during one update. Default: 0 */ + order?: number; + /** The execution time (ms) of this animation, default: 500 */ + duration?: number; + /** The number of times this animation is executed, -1 means loop execution, default: 1 */ + iterations?: number; + /** The easing effect of this animation, default: cubic-bezier(0.250, 0.460, 0.450, 0.940) */ + /** See https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing */ + easing?: string; +} + +interface IStateAnimate extends IAnimate { + /** The animation is executed when these states change */ + states: string[]; +} +``` + +
diff --git a/packages/site/docs/common/IAnimates.zh.md b/packages/site/docs/common/IAnimates.zh.md new file mode 100644 index 00000000000..9dd24de103e --- /dev/null +++ b/packages/site/docs/common/IAnimates.zh.md @@ -0,0 +1,42 @@ +
+ + IAnimates + + +```ts +interface IAnimates { + /** Combo 中某些图形创建时的动画 */ + buildIn?: IAnimate[]; + /** Combo 中某些图形销毁时的动画 */ + buildOut?: IAnimate[]; + /** Combo 中某些图形从隐藏变为显示时的动画 */ + show?: IAnimate[]; + /** Combo 中某些图形从显示变为隐藏时的动画 */ + hide?: IAnimate[]; + /** Combo 中某些图形在相关数据或状态更新时的动画 */ + update?: (IAnimate | IStateAnimate)[]; +} + +interface IAnimate { + /** 该动画相关的图形样式属性名称，例如 ['fill', 'lineWidth'] */ + fields?: string[]; + /** 该动画需要在哪个图形上执行，此处指定该图形的 ID。不指定则代表整个图形分组上的动画 */ + shapeId?: string; + /** 该动画在 IAnimate[] 中执行的顺序，借此可实现一次更新多个动画的顺序播放，默认值：0 */ + order?: number; + /** 该动画的执行时间(ms)，默认值：500 */ + duration?: number; + /** 该动画执行的次数，-1 代表循环执行，默认值：1 */ + iterations?: number; + /** 该动画的缓动效果，默认值：cubic-bezier(0.250, 0.460, 0.450, 0.940) */ + /** 可参考 https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing */ + easing?: string; +} + +interface IStateAnimate extends IAnimate { + /** 该动画在这些状态变更的时候执行 */ + states: string[]; +} +``` + +
diff --git a/packages/site/docs/common/LodLevels.en.md b/packages/site/docs/common/LodLevels.en.md new file mode 100644 index 00000000000..899b161f406 --- /dev/null +++ b/packages/site/docs/common/LodLevels.en.md @@ -0,0 +1,27 @@ +### lodLevels + +**Type**: `LodLevel[]` + +
+ + LodLevel + + +```ts +type LodLevel = { + /** The zoom level range defined by this level, when the zoom level of the graph satisfies zoomRange[0] <= zoom < zoomRange[1], it means that it is under this level */ + zoomRange: [number, number]; + /** Is this the primary level */ + primary: boolean; +}; +``` + +
+ +Specifies the zoom level divisions + +- The primary level has an ordinal of 0 +- `zoomRange` less than the current level, the ordinal decreases +- `zoomRange` greater than the current level, the ordinal increases + +> The ordinal is the value corresponding to `lod` in the following graph configuration diff --git a/packages/site/docs/common/LodLevels.zh.md b/packages/site/docs/common/LodLevels.zh.md new file mode 100644 index 00000000000..bb5df3857d9 --- /dev/null +++ b/packages/site/docs/common/LodLevels.zh.md @@ -0,0 +1,27 @@ +### lodLevels + +**类型**：`LodLevel[]` + +
+ + LodLevel + + +```ts +type LodLevel = { + /** 本层级所定义的图缩放等级范围，当图缩放等级满足 zoomRange[0] <= zoom < zoomRange[1] 时，表示在该层级下 */ + zoomRange: [number, number]; + /** 是否为主层级 */ + primary: boolean; +}; +``` + +
+ +设定图缩放等级的划分方式 + +- 主层级序数为 0 +- `zoomRange` 小于当前层级的，序号递减 +- `zoomRange` 大于当前层级的，序号递增 + +> 序数为在下面的图形配置中 `lod` 所对应的值 diff --git a/packages/site/docs/common/NodeShapeStyles.en.md b/packages/site/docs/common/NodeShapeStyles.en.md index b28391536cd..af44707df4b 100644 --- a/packages/site/docs/common/NodeShapeStyles.en.md +++ b/packages/site/docs/common/NodeShapeStyles.en.md @@ -22,7 +22,7 @@ Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](. -**Default**: undefined +**Default**: `undefined` The icon graphic at the center of the node (except for the built-in node type `'modelRect-node'`, which is supported by other built-in nodes and custom nodes that inherit from them without overriding the relevant content). It can be an image or text, with text supporting iconfont (assign `fontFamily: 'iconfont'`). @@ -38,7 +38,7 @@ The graphic type of `haloShape` follows the main graphic (`keyShape`). The graph -**Default**: undefined +**Default**: `undefined` In built-in nodes and themes, `haloShape` refers to the halo effect graphic displayed around the main graphic (keyShape) of a node when it is in the `active` state (usually triggered when the mouse hovers) or `selected` state (usually triggered when it is selected). In the logic of built-in nodes, the graphic type and color of `haloShape` follow the main graphic (`keyShape`). @@ -122,7 +122,7 @@ The related rectangle style type can be referred to in [`RectStyleProps`](../sha -**Default**: undefined +**Default**: `undefined` The background shape of the text of the node. @@ -190,7 +190,7 @@ Graphic Style Reference refer to [Rect](../shape/RectStyleProps.en.md). -**Default**: undefined +**Default**: `undefined` The badges around the node. A single badge includes text and background shape. The badgeShapes configuration is for multiple badges. [Node Badge Example](/en/examples/item/defaultNodes/#circle). @@ -220,7 +220,7 @@ The related circle style can be referred to in [`CircleStyleProps`](../shape/Cir -**Default**: undefined +**Default**: `undefined` The circular shapes (anchor shapes) of the edges entering each side of the node. The anchorShapes configuration is for multiple anchor shapes. [Node Anchor Example](/en/examples/item/defaultNodes/#circle). @@ -244,6 +244,6 @@ The different shape styles can be referred to in the corresponding shape type do -**Default**: undefined +**Default**: `undefined` All the xxShape(s) above are the possible shapes that exist in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`. diff --git a/packages/site/docs/common/NodeShapeStyles.zh.md b/packages/site/docs/common/NodeShapeStyles.zh.md index 2165156676b..5daf754ce00 100644 --- a/packages/site/docs/common/NodeShapeStyles.zh.md +++ b/packages/site/docs/common/NodeShapeStyles.zh.md @@ -105,7 +105,7 @@ type IconShapeStyle = Partial< -**默认值**：undefined +**默认值**：`undefined` 节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。 @@ -125,7 +125,7 @@ type HaloShapeStyle = ShapeStyle; -**默认值**：undefined +**默认值**：`undefined` 在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 diff --git a/packages/site/docs/common/NodeUserModel.en.md b/packages/site/docs/common/NodeUserModel.en.md new file mode 100644 index 00000000000..254c23bae40 --- /dev/null +++ b/packages/site/docs/common/NodeUserModel.en.md @@ -0,0 +1,69 @@ +### type + +**Type**: `string` + +Type: string The rendering type of the node. It can be a node type that has been registered with the graph class. Built-in and default registered types include `'circle-node'`, `'rect-node'`, and `'image-node'`. + +### x + +**Type**: `number` + +Type: number The x-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. + +### y + +**Type**: `number` + +The y-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. + +### z + +**Type**: `number` + +For 2D graphs, there is no need to specify the z value. If it is specified, it may cause the node to be invisible under the WebGL renderer. In 3D graphs, the z value is required and represents the z-axis position of the node. If the node position is not specified and no `layout` is configured for the graph instance, the node may be rendered at the top left corner of the canvas. + +### visible + +**Type**: `boolean` + +Whether the node is displayed by default. + +### color + +**Type**: `string` + +The main color of the primary shape (keyShape) of the node, expressed as a hexadecimal string. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the keyShape and various shape styles are configured. + +### label + +**Type**: `string` + +The text content of the label shape of the node. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the text value of the labelShape or other shape styles are configured. + + + + + +### anchorPoints + +**Type**: `number[][]` + +The positions where the edges are connected to the node. If not configured, the edges will automatically find the nearest positions on the edge of the node for connection. For example, `[[0,0.5],[1,0.5]]`, where the numbers indicate the percentage position relative to the primary shape (keyShape) of the node in the x or y direction. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the shape styles of the anchorShapes are configured. + +### parentId + +**Type**: `string | number` + +In a graph with combos, it indicates the ID of the combo to which the node belongs. + +### isRoot + +**Type**: `boolean` + +If you want to display the data as a tree diagram and use tree layout at the same time, specify whether this node is one of the root nodes of the tree. + +### preventPolylineEdgeOverlap + +**Type**: `boolean` + +Whether to treat this node as an obstacle and make it avoid the `'polyline-edge'` type of edges. The default value is `false`. diff --git a/packages/site/docs/common/NodeUserModel.zh.md b/packages/site/docs/common/NodeUserModel.zh.md new file mode 100644 index 00000000000..7bdad1d74aa --- /dev/null +++ b/packages/site/docs/common/NodeUserModel.zh.md @@ -0,0 +1,69 @@ +### type + +**类型**：`string` + +节点的渲染类型，可以是已经注册到图类上的节点类型，内置并默认注册的有 `'circle-node'`，`'rect-node'`，`'image-node'`。 + +### x + +**类型**：`number` + +节点的 x 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 + +### y + +**类型**：`number` + +节点的 y 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 + +### z + +**类型**：`number` + +对于 2D 的图，不需要指定 z 值。若指定可能导致 WebGL 渲染器下节点看不见。在 3D 图中，z 值是必须的，代表节点的 z 轴位置。若未指定节点位置，且未为图实例配置 `layout`（布局），则节点可能被渲染在画布左上角。 + +### visible + +**类型**：`boolean` + +节点是否默认展示出来。 + +### color + +**类型**：`string` + +该节点主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 keyShape 以及各种图形的图形样式。 + +### label + +**类型**：`string` + +节点 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 labelShape 的 text 值或其他图形样式。 + + + + + +### anchorPoints + +**类型**：`number[][]` + +该节点四周连接图形的位置，也是边连入的位置。若不配置，边则自动寻找节点边缘最近的位置进行连接。例如 `[[0,0.5],[1,0.5]]`，数字表示在 x 或 y 方向上相对于节点主图形（keyShape）的百分比位置。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 anchorShapes 的图形样式。 + +### parentId + +**类型**：`string | number` + +在有 combo 的图上表示该节点所属的 combo 的 id。 + +### isRoot + +**类型**：`boolean` + +若要将该份数据作为树图展示，同时使用树图布局时，指定该节点是否为树的根节点之一。 + +### preventPolylineEdgeOverlap + +**类型**：`boolean` + +是否将该节点作为一个障碍物，使 `'polyline-edge'` 类型的边躲避。默认为 `false`。