diff --git a/packages/site/common/api/elements/combos/circle-combo-interest.md b/packages/site/common/api/elements/combos/circle-combo-interest.md
new file mode 100644
index 00000000000..3fced84235a
--- /dev/null
+++ b/packages/site/common/api/elements/combos/circle-combo-interest.md
@@ -0,0 +1,31 @@
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [
+ { id: 'node1', combo: 'combo2', style: { x: 150, y: 150 } },
+ { id: 'node2', combo: 'combo2', style: { x: 200, y: 150 } },
+ { id: 'node3', combo: 'combo3', style: { x: 300, y: 150 } },
+ { id: 'node4', combo: 'combo3', style: { x: 350, y: 150 } },
+ { id: 'node5', combo: 'combo4', style: { x: 230, y: 300 } },
+ { id: 'node6', combo: 'combo4', style: { x: 280, y: 300 } },
+ ],
+ combos: [
+ { id: 'combo1', style: { labelText: '兴趣小组' } },
+ { id: 'combo2', combo: 'combo1', style: { labelText: '书法' } },
+ { id: 'combo3', combo: 'combo1', style: { labelText: '影视' } },
+ { id: 'combo4', combo: 'combo1', style: { labelText: '游戏' } },
+ ],
+ },
+ node: {
+ style: {
+ labelText: (d) => d.id,
+ },
+ },
+ behaviors: ['drag-element', 'collapse-expand'],
+ animation: true,
+ },
+ { width: 600, height: 600 },
+);
+```
diff --git a/packages/site/common/api/elements/combos/circle-combo.md b/packages/site/common/api/elements/combos/circle-combo.md
index cb936d7404f..566cb996d61 100644
--- a/packages/site/common/api/elements/combos/circle-combo.md
+++ b/packages/site/common/api/elements/combos/circle-combo.md
@@ -13,7 +13,7 @@ createGraph(
],
},
node: { style: { fill: '#7e3feb' } },
- behaviors: ['collapse-expand'],
+ behaviors: ['drag-element', 'collapse-expand'],
plugins: ['grid-line'],
animation: true,
},
diff --git a/packages/site/common/api/elements/combos/rect-combo-architecture.md b/packages/site/common/api/elements/combos/rect-combo-architecture.md
new file mode 100644
index 00000000000..c50f8dda5ef
--- /dev/null
+++ b/packages/site/common/api/elements/combos/rect-combo-architecture.md
@@ -0,0 +1,45 @@
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [
+ { id: 'node1', combo: 'combo2', style: { x: 100, y: 100, labelText: '微服务1' } },
+ { id: 'node2', combo: 'combo2', style: { x: 200, y: 100, labelText: '微服务2' } },
+ { id: 'node3', combo: 'combo2', style: { x: 100, y: 200, labelText: '微服务3' } },
+ { id: 'node4', combo: 'combo2', style: { x: 200, y: 200, labelText: '微服务4' } },
+ { id: 'node5', combo: 'combo3', style: { x: 300, y: 100, labelText: '第三方登录' } },
+ { id: 'node6', combo: 'combo3', style: { x: 300, y: 150, labelText: '任务调度' } },
+ { id: 'node7', combo: 'combo3', style: { x: 300, y: 200, labelText: '消息服务' } },
+ ],
+ edges: [
+ { source: 'node1', target: 'node2' },
+ { source: 'node1', target: 'node3' },
+ { source: 'node3', target: 'node4' },
+ ],
+ combos: [
+ { id: 'combo1', style: { labelText: '服务层' } },
+ { id: 'combo2', combo: 'combo1', style: { labelText: '业务微服务' } },
+ { id: 'combo3', combo: 'combo1', style: { labelText: '集成模块' } },
+ ],
+ },
+ node: {
+ type: 'rect',
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ },
+ },
+ combo: {
+ type: 'rect',
+ style: {
+ padding: 16,
+ },
+ },
+ behaviors: ['drag-element', 'collapse-expand'],
+ animation: true,
+ },
+ { width: 600, height: 400 },
+);
+```
diff --git a/packages/site/docs/manual/element/combo/build-in/BaseCombo.zh.md b/packages/site/docs/manual/element/combo/build-in/BaseCombo.zh.md
index 8a9b33fcf7b..d609b687af9 100644
--- a/packages/site/docs/manual/element/combo/build-in/BaseCombo.zh.md
+++ b/packages/site/docs/manual/element/combo/build-in/BaseCombo.zh.md
@@ -4,16 +4,17 @@ title: 组合配置项
本文介绍组合属性配置，配置位置如下：
-```js {5-9}
+```js {6-10}
import { Graph } from '@antv/g6';
const graph = new Graph({
+ // 其他配置...
combo: {
- type: 'circle',
- style: {},
- state: {},
- palette: {},
- animation: {},
+ type: 'circle', // 组合类型
+ style: {}, // 组合样式
+ state: {}, // 状态样式
+ palette: {}, // 色板配置
+ animation: {}, // 动画配置
},
});
```
@@ -32,94 +33,531 @@ const graph = new Graph({
指定组合类型，内置组合类型名称或自定义组合的名称。默认为 `circle`（圆形组合）。
-| 支持的值 | 描述 | DEMO |
-| -------- | ---------- | --------------------------------------------------- |
-| `circle` | 圆形 Combo | [DEMO](/manual/element/combo/build-in/circle-combo) |
-| `rect` | 矩形 Combo | [DEMO](/manual/element/combo/build-in/rect-combo) |
+```typescript
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ type: 'circle',
+ },
+});
+```
+
+可选值有：
+
+- `circle`：[圆形组合](/manual/element/combo/build-in/circle)
+- `rect`：[矩形组合](/manual/element/combo/build-in/rect)
## Style
在此处定义组合的样式，包括颜色、大小等。
+```typescript
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {},
+ },
+});
+```
+
-- `key` ：组合的主图形，表示组合的主要形状；
+- `key` ：组合的主图形，表示组合的主要形状，例如圆形、矩形等；
- `halo` ：主图形周围展示的光晕效果的图形；
- `label` ：文本标签，通常用于展示组合的名称或描述；
以下样式配置将按原子图形依次说明：
-### 展开时样式 key
-
-| 属性 | 描述 | 类型 | 默认值 |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------ |
-| x | x 坐标 | number | 0 |
-| y | y 坐标 | number | 0 |
-| z | z 坐标 | number | 0 |
-| padding | 组合的内边距，只在展开状态下生效。展开时组合的大小由自子元素集合的的包围盒以及 padding 共同决定 | number | number[] | 0 |
-| fill | 填充色 | string | `#fff` |
-| stroke | 描边色 | string | `#000` |
-| lineWidth | 描边宽度 | number | 1 |
-| `{StyleProps}` | 更多图形配置，参考 [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - |
-
-### 收起时样式 collapsed
-
-| 属性 | 描述 | 类型 | 默认值 |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------ |
-| collapsed | 当前组合是否展开 | boolean | false |
-| collapsedSize | 组合收起后的默认大小 | number | [number, number] | [number, number, number] | 32 |
-| collapseFill | 填充色 | string | `#fff` |
-| collapsedStroke | 描边色 | string | `#000` |
-| collapsedLineWidth | 描边宽度 | number | 1 |
-| `collapsed{StyleProps}` | 更多图形配置，参考 [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) 配置项。例如 fillOpacity 代表主图形填充色透明度 | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - |
-
-### 收起时标记样式 collapsedMarker
-
-| 属性 | 描述 | 类型 | 默认值 |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| collapsedMarker | 组合收起时是否显示标记 | boolean | false |
-| collapsedMarkerType | 组合收起时显示的标记类型
- `'child-count'`: 子元素数量（包括 Node 和 Combo）
- `'descendant-count'`: 后代元素数量（包括 Node 和 Combo）
- `'node-count'`: 后代元素数量（只包括 Node）
- `(children: NodeLikeData[]) => string`: 自定义处理逻辑 | `child-count` | `descendant-count` | `node-count` | ((children: NodeData | ComboData[]) => string) | |
-| collapsedMarkerSrc | 图片来源。其优先级高于 collapsedMarkerText | string | - |
-| collapsedMarkerWidth | 图片宽度 | number | - |
-| collapsedMarkerHeight | 图标高度 | number | - |
-| collapsedMarkerRadius | 图标圆角半径 | number | 0 |
-| collapsedMarkerText | 图标文字 | string | - |
-| collapsedMarkerFill | 图标文字颜色 | string | - |
-| collapsedMarkerFontSize | 图标字体大小 | number | 16 |
-| collapsedMarkerFontWeight | 图标字体粗细 | number | string | `normal` |
-| `collapsedMarker{StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 collapsedMarkerFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - |
-
-### 标签样式 label
-
-| 属性 | 描述 | 类型 | 默认值 |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| label | 是否显示组合标签 | boolean | true |
-| labelText | 标签文字内容 | string | - |
-| labelFill | 标签文字颜色 | string | - |
-| labelFontSize | 标签字体大小 | number | 12 |
-| labelFontWeight | 标签字体粗细 | number | string | `normal` |
-| labelPlacement | 标签相对于组合主图形的位置 | `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom` |
-| labelOffsetX | 标签在 x 轴方向上的偏移量 | number | 0 |
-| labelOffsetY | 标签在 y 轴方向上的偏移量 | number | 0 |
-| labelWordWrap | 是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false |
-| labelMaxWidth | 标签最大宽度。开启自动折行后，超出该宽度则换行
- string: 表示以相对于组合宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过组合宽度的一半
- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素 | number | string | `200%` |
-| labelMaxLines | 最大行数 | number | 1 |
-| labelPadding | 标签内边距 | number | number[] | 0 |
-| `label{StyleProps}` | 更多标签样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值。例如 labelFontSize 代表标签文字大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - |
-| labelBackground | 是否显示背景 | boolean | false |
-| labelBackgroundFill | 标签背景填充色 | string | - |
-| labelBackgroundRadius | 标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number | number[] | 0 |
-| `labelBackground{StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundFillOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - |
-
-### 光晕样式 halo
-
-| 属性 | 描述 | 类型 | 默认值 |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------- |
-| halo | 是否显示组合光晕 | boolean | false |
-| haloFill | 光晕填充色 | string | 与主图形的填充色一致 |
-| haloStroke | 光晕描边色 | string | 与主图形的填充色一致 |
-| haloLineWidth | 光晕描边宽度 | number | 3 |
-| `halo{StyleProps}` | 更多光晕样式配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 haloFillOpacity 代表光晕填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - |
+### 展开时样式
+
+组合展开时的主图形样式
+
+| 属性 | 描述 | 类型 | 默认值 | 必选 |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------- | ---- |
+| collapsed | 当前组合是否收起 | boolean | false | |
+| cursor | 组合鼠标移入样式，[配置项](#cursor) | string | default | |
+| fill | 组合填充色 | string | `#99ADD1` | |
+| fillOpacity | 组合填充色透明度 | number \| string | 0.04 | |
+| increasedLineWidthForHitTesting | 当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让“细线”更容易被拾取到 | number | 0 | |
+| lineCap | 组合描边端点样式 | `round` \| `square` \| `butt` | `butt` | |
+| lineDash | 组合描边虚线样式 | number[] | - | |
+| lineDashOffset | 组合描边虚线偏移量 | number | - | |
+| lineJoin | 组合描边连接处样式 | `round` \| `bevel` \| `miter` | `miter` | |
+| lineWidth | 组合描边宽度 | number | 1 | |
+| opacity | 组合透明度 | number \| string | 1 | |
+| shadowBlur | 组合阴影模糊度 | number | - | |
+| shadowColor | 组合阴影颜色 | string | - | |
+| shadowOffsetX | 组合阴影在 x 轴方向上的偏移量 | number \| string | - | |
+| shadowOffsetY | 组合阴影在 y 轴方向上的偏移量 | number \| string | - | |
+| shadowType | 组合阴影类型 | `inner` \| `outer` | `outer` | |
+| stroke | 组合描边色 | string | `#99add1` | |
+| strokeOpacity | 组合描边色透明度 | number \| string | 1 | |
+| visibility | 组合是否可见 | `visible` \| `hidden` | `visible` | |
+| x | 组合 x 坐标 | number | 0 | |
+| y | 组合 y 坐标 | number | 0 | |
+| z | 组合 z 坐标 | number | 0 | |
+| zIndex | 组合渲染层级 | number | 0 | |
+| `{styleProps}` | 更多图形配置，参考 [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) 配置项 | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - | |
+
+#### Cursor
+
+可选值有：`auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`
+
+**示例：**
+
+```js {5-7}
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {
+ fill: '#1783FF', // 填充色
+ stroke: '#000', // 描边色
+ lineWidth: 2, // 描边宽度
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [{ id: 'node1', combo: 'combo1' }],
+ combos: [{ id: 'combo1' }],
+ },
+ combo: {
+ style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 },
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
+
+### 收起时样式
+
+当 `collapsed` 为 `true` 时生效
+
+| 属性 | 描述 | 类型 | 默认值 | 必选 |
+| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------- | ---- |
+| collapsedCursor | 组合收起时的鼠标移入样式，[配置项](#cursor) | string | 默认与展开时的 cursor 一致 | |
+| collapsedFill | 组合收起时的填充色 | string | 默认与展开时的 fill 一致 | |
+| collapsedFillOpacity | 组合收起时的填充色透明度 | number \| string | 1 | |
+| collapsedIncreasedLineWidthForHitTesting | 组合收起时，当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让“细线”更容易被拾取到 | number | 0 | |
+| collapsedLineCap | 组合收起时的描边端点样式 | `round` \| `square` \| `butt` | 默认与展开时的 lineCap 一致 | |
+| collapsedLineDash | 组合收起时的描边虚线样式 | number[] | 默认与展开时的 lineDash 一致 | |
+| collapsedLineDashOffset | 组合收起时的描边虚线偏移量 | number | 默认与展开时的 lineDashOffset 一致 | |
+| collapsedLineJoin | 组合收起时的描边连接处样式 | `round` \| `bevel` \| `miter` | 默认与展开时的 lineJoin 一致 | |
+| collapsedLineWidth | 组合收起时的描边宽度 | number | 默认与展开时的 lineWidth 一致 | |
+| collapsedMarker | 组合收起时是否显示标记，[配置项](#收起时标记样式collapsedMarker) | boolean | true | |
+| collapsedOpacity | 组合收起时的透明度 | number \| string | 默认与展开时的 opacity 一致 | |
+| collapsedShadowBlur | 组合收起时的阴影模糊度 | number | 默认与展开时的 shadowBlur 一致 | |
+| collapsedShadowColor | 组合收起时的阴影颜色 | string | 默认与展开时的 shadowColor 一致 | |
+| collapsedShadowOffsetX | 组合收起时的阴影在 x 轴方向上的偏移量 | number \| string | 默认与展开时的 shadowOffsetX 一致 | |
+| collapsedShadowOffsetY | 组合收起时的阴影在 y 轴方向上的偏移量 | number \| string | 默认与展开时的 shadowOffsetY 一致 | |
+| collapsedShadowType | 组合收起时的阴影类型 | `inner` \| `outer` | 默认与展开时的 shadowType 一致 | |
+| collapsedSize | 组合收起时的大小 | number | [number, number] | [number, number, number] | 32 | |
+| collapsedStroke | 组合收起时的描边色 | string | 默认与展开时的 stroke 一致 | |
+| collapsedStrokeOpacity | 组合收起时的描边色透明度 | number \| string | 默认与展开时的 strokeOpacity 一致 | |
+| collapsedVisibility | 组合收起时是否可见 | `visible` \| `hidden` | 默认与展开时的 visibility 一致 | |
+| `collapsed{styleProps}` | 更多图形配置，参考 [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) 配置项 | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - | |
+
+**示例：**
+
+```js {5-7}
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {
+ collapsedFill: '#1783FF', // 填充色
+ collapsedStroke: '#000', // 描边色
+ collapsedLineWidth: 2, // 描边宽度
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [{ id: 'node1', combo: 'combo1' }],
+ combos: [{ id: 'combo1', style: { collapsed: true } }],
+ },
+ combo: {
+ style: { collapsedFill: '#1783FF', collapsedStroke: '#000', collapsedLineWidth: 2 },
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
+
+### 收起时标记样式
+
+当 `collapsedMarker` 为 `true` 时生效
+
+| 属性 | 描述 | 类型 | 默认值 | 必选 |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---- |
+| collapsedMarkerType | 组合收起时显示的标记类型
- `'child-count'`: 子元素数量（包括 Node 和 Combo）
- `'descendant-count'`: 后代元素数量（包括 Node 和 Combo）
- `'node-count'`: 后代元素数量（只包括 Node）
- `(children: NodeLikeData[]) => string`: 自定义处理逻辑 | `child-count` | `descendant-count` | `node-count` | ((children: NodeData | ComboData[]) => string) | `child-count` | |
+| collapsedMarkerFill | 图标文字颜色 | string | #fff | |
+| collapsedMarkerFillOpacity | 图标文字颜色透明度 | number | 1 | |
+| collapsedMarkerFontSize | 图标字体大小 | number | 12 | |
+| collapsedMarkerFontWeight | 图标字体粗细 | number | string | `normal` | |
+| collapsedMarkerRadius | 图标圆角半径 | number | 0 | |
+| collapsedMarkerSrc | 图片来源。其优先级高于 `collapsedMarkerText` | string | - | |
+| collapsedMarkerText | 图标文字 | string | - | |
+| collapsedMarkerTextAlign | 图标文字水平对齐方式 | `center` \| `end` \| `left` \| `right` \| `start` | `center` | |
+| collapsedMarkerTextBaseline | 图标文字对齐基线 | `alphabetic` \| `bottom` \| `hanging` \| `ideographic` \| `middle` \| `top` | `middle` | |
+| collapsedMarkerWidth | 图标宽度 | number | - | |
+| collapsedMarkerHeight | 图标高度 | number | - | |
+| collapsedMarkerZIndex | 图标层级 | number | 1 | |
+| `collapsedMarker{StyleProps}` | 更多图标样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text)、[ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) 配置项。例如 collapsedMarkerFontSize 代表文字图标的字体大小 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | |
+
+**示例：**
+
+```js {5-6}
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {
+ collapsedMarkerFill: '#1783FF', // 填充色
+ collapsedMarkerFontSize: 30, // 图标字体大小
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [
+ { id: 'node1', combo: 'combo1' },
+ { id: 'node2', combo: 'combo1' },
+ ],
+ combos: [{ id: 'combo1', style: { collapsed: true } }],
+ },
+ combo: {
+ style: {
+ collapsedMarkerFill: '#1783FF',
+ collapsedMarkerFontSize: 30,
+ },
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
+
+### 标签样式
+
+标签用于显示组合的文本信息：
+
+| 属性 | 描述 | 类型 | 默认值 | 必选 |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------- | ---- |
+| label | 是否显示组合标签 | boolean | true | |
+| labelCursor | 鼠标移入组合标签时显示的样式，[配置项](#cursor) | string | `default` | |
+| labelFill | 组合标签文字颜色 | string | #000 | |
+| labelFillOpacity | 组合标签文字颜色的透明度 | number | 1 | |
+| labelFontFamily | 组合标签字体族 | string | - | |
+| labelFontSize | 组合标签字体大小 | number | 12 | |
+| labelFontStyle | 组合标签字体样式 | `normal` \| `italic` \| `oblique` | - | |
+| labelFontVariant | 组合标签字体变种 | `normal` \| `small-caps` \| string | - | |
+| labelFontWeight | 组合标签字体粗细 | `normal` \| `bold` \| `bolder` \| `lighter` \| number | 400 | |
+| labelLeading | 行间距 | number | 0 | |
+| labelLetterSpacing | 组合标签字间距 | number \| string | - | |
+| labelLineHeight | 组合标签行高 | number \| string | - | |
+| labelMaxLines | 组合标签最大行数 | number | 1 | |
+| labelMaxWidth | 组合标签最大宽度，[配置项](#labelmaxwidth) | number \| string | `200%` | |
+| labelOffsetX | 组合标签在 x 轴方向上的偏移量 | number | 0 | |
+| labelOffsetY | 组合标签在 y 轴方向上的偏移量 | number | 0 | |
+| labelPadding | 组合标签内边距 | number \| number[] | 0 | |
+| labelPlacement | 组合标签相对于组合主图形的位置，[配置项](#labelplacement) | string | `bottom` | |
+| labelText | 组合标签文字内容 | string | - | |
+| labelTextAlign | 组合标签文本水平对齐方式 | `start` \| `center` \| `middle` \| `end` \| `left` \| `right' \| `left` | | |
+| labelTextBaseline | 组合标签文本基线 | `top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom` | - | |
+| labelTextDecorationColor | 组合标签文本装饰线颜色 | string | - | |
+| labelTextDecorationLine | 组合标签文本装饰线 | string | - | |
+| labelTextDecorationStyle | 组合标签文本装饰线样式 | `solid` \| `double` \| `dotted` \| `dashed` \| `wavy` | - | |
+| labelTextOverflow | 组合标签文本溢出处理方式 | `clip` \| `ellipsis` \| string | - | |
+| labelTextPath | 组合标签文本路径 | Path | - | |
+| labelWordWrap | 组合标签是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | |
+| labelZIndex | 组合标签渲染层级 | number | 0 | |
+| `label{StyleProps}` | 更多标签样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值。比如 labelOpacity 代表标签透明度 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | |
+
+#### LabelPlacement
+
+可选值有：`left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom`
+
+#### LabelMaxWidth
+
+开启自动折行 `labelWordWrap` 后，超出该宽度则换行:
+
+- string: 表示以相对于组合元素宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过组合宽度的一半
+- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素
+
+比如，设置多行标签文字：
+
+```json
+{
+ "labelWordWrap": true,
+ "labelMaxWidth": 200,
+ "labelMaxLines": 3
+}
+```
+
+**示例：**
+
+```js {5-10}
+const graph = new Graph({
+ // 其他配置
+ combo: {
+ style: {
+ label: true, // 是否显示组合标签
+ labelText: '组合名称', // 标签文字内容
+ labelFill: '#000', // 标签文字颜色
+ labelFontSize: 12, // 标签字体大小
+ labelFontWeight: 'normal', // 标签字体粗细
+ labelPlacement: 'bottom', // 标签相对于组合主图形的位置
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [{ id: 'node1', combo: 'combo1' }],
+ combos: [
+ {
+ id: 'combo1',
+ style: {
+ label: true,
+ labelText: '组合名称',
+ labelFill: '#000',
+ labelFontSize: 12,
+ labelFontWeight: 'normal',
+ labelPlacement: 'bottom',
+ },
+ },
+ ],
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
+
+### 标签背景样式
+
+标签背景用于显示组合标签的背景：
+
+| 属性 | 描述 | 类型 | 默认值 |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------ |
+| labelBackground | 组合标签背景是否显示 | boolean | false |
+| labelBackgroundCursor | 组合标签背景鼠标移入样式，[配置项](#cursor) | string | `default` |
+| labelBackgroundFill | 组合标签背景填充色 | string | #000 |
+| labelBackgroundFillOpacity | 组合标签背景透明度 | number | 0.75 |
+| labelBackgroundHeight | 组合标签背景高度 | string \| number | - |
+| labelBackgroundLineDash | 组合标签背景虚线配置 | number \| string \|(number \| string )[] | - |
+| labelBackgroundLineDashOffset | 组合标签背景虚线偏移量 | number | - |
+| labelBackgroundLineWidth | 组合标签背景描边线宽 | number | - |
+| labelBackgroundPadding | 组合标签背景内间距 | number \| number[] | [2, 4, 2, 4] |
+| labelBackgroundRadius | 组合标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number \| number[] | 0 |
+| labelBackgroundShadowBlur | 组合标签背景阴影模糊程度 | number | - |
+| labelBackgroundShadowColor | 组合标签背景阴影颜色 | string | - |
+| labelBackgroundShadowOffsetX | 组合标签背景阴影 X 方向偏移 | number | - |
+| labelBackgroundShadowOffsetY | 组合标签背景阴影 Y 方向偏移 | number | - |
+| labelBackgroundStroke | 组合标签背景描边颜色 | string | - |
+| labelBackgroundStrokeOpacity | 组合标签背景描边透明度 | number \| string | 1 |
+| labelBackgroundVisibility | 组合标签背景是否可见 | `visible` \| `hidden` | - |
+| labelBackgroundZIndex | 组合标签背景渲染层级 | number | 1 |
+| `labelBackground{StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - |
+
+**示例：**
+
+```js {5-8}
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {
+ labelBackground: true, // 是否显示组合标签背景
+ labelBackgroundFill: '#000', // label背景填充
+ labelBackgroundRadius: 10, // label背景圆角
+ labelBackgroundFillOpacity: 0.5, // label背景填充色透明度
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [{ id: 'node1', combo: 'combo1' }],
+ combos: [
+ {
+ id: 'combo1',
+ style: {
+ label: true,
+ labelText: '组合名称',
+ labelFill: '#000',
+ labelFontSize: 12,
+ labelFontWeight: 'normal',
+ labelPlacement: 'bottom',
+ labelBackground: true,
+ labelBackgroundFill: '#000',
+ labelBackgroundRadius: 10,
+ labelBackgroundFillOpacity: 0.5,
+ },
+ },
+ ],
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
+
+### 光晕样式
+
+| 属性 | 描述 | 类型 | 默认值 | 必选 |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------- | ---- |
+| halo | 是否显示组合光晕 | boolean | false | |
+| haloCursor | 组合光晕鼠标移入样式，[配置项](#cursor) | string | `default` | |
+| haloDraggable | 组合光晕是否允许拖拽 | boolean | true | |
+| haloDroppable | 组合光晕是否允许接收被拖拽的元素 | boolean | false | |
+| haloFill | 光晕填充色 | string | 与主图形的填充色 `fill` 一致 | |
+| haloFillRule | 组合光晕填充规则 | `nonzero` \| `evenodd` | - | |
+| haloFilter | 组合光晕滤镜 | string | - | |
+| haloLineWidth | 组合光晕描边宽度 | number | 12 | |
+| haloPointerEvents | 组合光晕效果是否响应指针事件，[配置项](#pointerevents) | string | `none` | |
+| haloStroke | 组合光晕描边色，**此属性用于设置组合周围光晕的颜色，帮助突出显示组合** | string | `#99add1` | |
+| haloStrokeOpacity | 组合光晕描边色透明度 | number | 0.25 | |
+| haloVisibility | 组合光晕可见性 | `visible` \| `hidden` | `visible` | |
+| haloZIndex | 组合光晕渲染层级 | number | -1 | |
+| `halo{StyleProps}` | 更多光晕样式配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 haloFillOpacity 代表光晕填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | |
+
+#### PointerEvents
+
+可选值有：
+`visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`
+
+**示例：**
+
+```js {5-7}
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {
+ halo: true, // 是否显示组合光晕
+ haloStroke: '#FF0000', // 组合光晕描边色
+ haloLineWidth: 10, // 组合光晕描边宽度
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ nodes: [{ id: 'node1', combo: 'combo1' }],
+ combos: [{ id: 'combo1' }],
+ },
+ combo: {
+ style: {
+ halo: true,
+ haloStroke: '#FF0000',
+ haloLineWidth: 10,
+ },
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
+
+### 图标样式
+
+| 属性 | 描述 | 类型 | 默认值 |
+| ----------------------- | ----------------------------------- | --------------------------------------------------------------------------- | ---------------- |
+| icon | 是否显示组合图标 | boolean | true |
+| iconFill | 组合图标文字颜色 | string | - |
+| iconFontFamily | 组合图标字体族 | string | - |
+| iconFontSize | 组合图标字体大小 | number | 16 |
+| iconFontStyle | 组合图标字体样式 | `normal` \| `italic` \| `oblique` | `normal` |
+| iconFontVariant | 组合图标字体变种 | `normal` \| `small-caps` \| string | `normal` |
+| iconFontWeight | 组合图标字体粗细 | number \| string | `normal` |
+| iconHeight | 组合图标高度 | number | 主图形高度的一半 |
+| iconLetterSpacing | 组合图标文本字间距 | number \| string | - |
+| iconLineHeight | 组合图标文本行高 | number \| string | - |
+| iconMaxLines | 组合图标文本最大行数 | number | 1 |
+| iconRadius | 组合图标圆角半径 | number | 0 |
+| iconSrc | 组合图片来源。其优先级高于 iconText | string | - |
+| iconText | 组合图标文字 | string | - |
+| iconTextAlign | 组合图标文本水平对齐方式 | `start` \| `center` \| `middle` \| `end` \| `left` \| `right` | `left` |
+| iconTextBaseline | 组合图标文本基线 | `top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom` | `alphabetic` |
+| iconTextDecorationColor | 组合图标文本装饰线颜色 | string | - |
+| iconTextDecorationLine | 组合图标文本装饰线 | string | - |
+| iconTextDecorationStyle | 组合图标文本装饰线样式 | `solid` \| `double` \| `dotted` \| `dashed` \| `wavy` | `solid` |
+| iconTextOverflow | 组合图标文本溢出处理方式 | `clip` \| `ellipsis` \| string | `clip` |
+| iconWidth | 组合图标宽度 | number | 主图形宽度的一半 |
+| iconWordWrap | 组合图标文本是否自动换行 | boolean | - |
+
+**示例：**
+
+```js {5-9}
+const graph = new Graph({
+ // 其他配置...
+ combo: {
+ style: {
+ iconText: '文本', // 图标文本
+ iconFill: '#FF0000', // 图标文本颜色
+ iconFontSize: 14, // 图标文本大小
+ iconFontWeight: 'bold', // 图标文本粗细
+ iconFontStyle: 'italic', // 图标文本样式
+ },
+ },
+});
+```
+
+效果如下：
+
+```js | ob { pin: false }
+createGraph(
+ {
+ autoFit: 'center',
+ data: {
+ combos: [{ id: 'combo1' }],
+ },
+ combo: {
+ style: {
+ iconText: '文本',
+ iconFill: '#FF0000',
+ iconFontSize: 14,
+ iconFontWeight: 'bold',
+ iconFontStyle: 'italic',
+ },
+ },
+ },
+ { width: 240, height: 100 },
+);
+```
## State
@@ -139,19 +577,17 @@ type ComboState = {
例如，当组合处于 `focus` 状态时，可以为其添加一个宽度为 3 且颜色为橙色的描边。
-```json
-{
- "combo": {
- "state": {
- "focus": {
- "lineWidth": 3,
- "stroke": "orange",
- "fill": "orange",
- "fillOpacity": 0.2
- }
- }
- }
-}
+```js {4-7}
+const graph = new Graph({
+ combo: {
+ state: {
+ focus: {
+ lineWidth: 3, // 描边宽度
+ stroke: 'orange', // 描边颜色
+ },
+ },
+ },
+});
```
效果如下图所示：
diff --git a/packages/site/docs/manual/element/combo/build-in/CircleCombo.zh.md b/packages/site/docs/manual/element/combo/build-in/CircleCombo.zh.md
index a3fc82d5bb9..fb6375b7beb 100644
--- a/packages/site/docs/manual/element/combo/build-in/CircleCombo.zh.md
+++ b/packages/site/docs/manual/element/combo/build-in/CircleCombo.zh.md
@@ -2,6 +2,24 @@
title: Circle 圆形
---
+## 概述
+
+圆形组合以圆形边界包裹子节点或子组合，适合表示平等或非层级化的群组关系。
+
+适用场景：
+
+- 适合表示无明确层级关系的节点群组，圆形组合能体现成员的平等性，如社交网络中的用户群体、分散式团队结构（突出协作性）。
+
+## 在线体验
+
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseCombo](./BaseCombo.zh.md)
+## 样式配置
+
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseCombo](./BaseCombo.zh.md)
+
+## 示例
+
+以下示例为兴趣小组人员分布：
+
+
diff --git a/packages/site/docs/manual/element/combo/build-in/RectCombo.zh.md b/packages/site/docs/manual/element/combo/build-in/RectCombo.zh.md
index 36453e0d373..36ab04d985a 100644
--- a/packages/site/docs/manual/element/combo/build-in/RectCombo.zh.md
+++ b/packages/site/docs/manual/element/combo/build-in/RectCombo.zh.md
@@ -2,6 +2,25 @@
title: Rect 矩形
---
+## 概述
+
+矩形组合以直角边界组织内容，支持严格的层级结构。
+
+适用场景：
+
+- **系统架构图**：如系统架构里面的服务分层，以及每层服务里面的细分等。
+- **地理区域划分**：如城市包含多个区域，矩形组合能直观展示行政边界或功能分区。
+
+## 在线体验
+
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseCombo](./BaseCombo.zh.md)
+## 样式配置
+
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseCombo](./BaseCombo.zh.md)
+
+## 示例
+
+以下示例为简单的微服务架构服务层：
+
+
diff --git a/packages/site/docs/manual/element/node/build-in/BaseNode.zh.md b/packages/site/docs/manual/element/node/build-in/BaseNode.zh.md
index b0993895c86..273b88b1e20 100644
--- a/packages/site/docs/manual/element/node/build-in/BaseNode.zh.md
+++ b/packages/site/docs/manual/element/node/build-in/BaseNode.zh.md
@@ -85,7 +85,7 @@ const graph = new Graph({
| 属性 | 描述 | 类型 | 默认值 | 必选 |
| ------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------- | --------- | ---- |
-| collapsed | 当前节点/组合是否展开 | boolean | false | |
+| collapsed | 当前节点/组合是否折叠 | boolean | false | |
| cursor | 节点鼠标移入样式，[配置项](#cursor) | string | default | |
| fill | 节点填充色 | string | `#1783FF` | |
| fillOpacity | 节点填充色透明度 | number \| string | 1 | |