Loading...
本文介绍内置组合通用属性配置。
import { Graph } from '@antv/g6';const graph = new Graph({combo: {type: 'circle', // 组合类型style: {}, // 组合样式state: {}, // 状态样式palette: {}, // 色板配置animation: {}, // 动画配置},});
指定组合类型,内置组合类型名称或自定义组合的名称。默认为 circle
(圆形)。⚠️ 注意:这里决定了主图形的形状。
const graph = new Graph({combo: {type: 'circle',},});
⚠️ 动态配置说明:type
属性同样支持动态配置,可以根据组合数据动态选择组合类型:
const graph = new Graph({combo: {// 静态配置type: 'circle',// 动态配置 - 箭头函数形式type: (datum) => datum.data.comboType || 'circle',// 动态配置 - 普通函数形式(可访问 graph 实例)type: function (datum) {console.log(this); // graph 实例return datum.data.category === 'important' ? 'rect' : 'circle';},},});
可选值有:
定义组合的样式,包括颜色、大小等。
const graph = new Graph({combo: {style: {},},});
⚠️ 动态配置说明:以下所有样式属性都支持动态配置,即可以传入函数来根据组合数据动态计算属性值:
const graph = new Graph({combo: {style: {// 静态配置fill: '#1783FF',// 动态配置 - 箭头函数形式stroke: (datum) => (datum.data.isActive ? '#FF0000' : '#000000'),// 动态配置 - 普通函数形式(可访问 graph 实例)lineWidth: function (datum) {console.log(this); // graph 实例return datum.data.importance > 5 ? 3 : 1;},// 嵌套属性也支持动态配置labelText: (datum) => `组合: ${datum.id}`,badges: (datum) => datum.data.tags.map((tag) => ({ text: tag })),},},});
其中 datum
参数为组合数据对象 (ComboData
),包含组合的所有数据信息。
一个完整的组合由以下几部分构成:
key
:组合的主图形,表示组合的主要形状,例如圆形、矩形等;label
:文本标签,通常用于展示组合的名称或描述;halo
:主图形周围展示的光晕效果的图形;badge
:默认位于组合右上角的徽标;以下样式配置将按原子图形依次说明:
主图形是组合的核心部分,定义了组合的基本形状和外观。以下是常见的配置场景:
设置组合的基本外观:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {fill: '#5B8FF9', // 蓝色填充stroke: '#1A1A1A', // 深色描边lineWidth: 2,fillOpacity: 0.2,},},});graph.render();
为组合添加透明度和阴影效果:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {fill: '#61DDAA',fillOpacity: 0.15,shadowColor: 'rgba(97, 221, 170, 0.4)',shadowBlur: 12,shadowOffsetX: 2,shadowOffsetY: 4,stroke: '#F0F0F0',lineWidth: 1,},},});graph.render();
创建带虚线边框的组合:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {fill: '#FFF1F0',fillOpacity: 0.1,stroke: '#F5222D',lineWidth: 2,lineDash: [6, 4],lineCap: 'round',},},});graph.render();
以下为完整的主图形样式配置:
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
collapsed | 当前组合是否折叠 | boolean | false | |
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 | |
pointerEvents | 组合如何响应指针事件,配置项 | string | auto | |
shadowBlur | 组合阴影模糊度 | number | - | |
shadowColor | 组合阴影颜色 | string | - | |
shadowOffsetX | 组合阴影在 x 轴方向上的偏移量 | number | string | - | |
shadowOffsetY | 组合阴影在 y 轴方向上的偏移量 | number | string | - | |
shadowType | 组合阴影类型 | inner | outer | outer | |
size | 组合大小,快捷设置组合宽高,配置项 | number | number[] | - | |
stroke | 组合描边色 | string | #99ADD1 | |
strokeOpacity | 组合描边色透明度 | number | string | 1 | |
transform | transform 属性允许你旋转、缩放、倾斜或平移给定组合 | string | - | |
transformOrigin | 旋转与缩放中心,也称作变换中心 | string | - | |
visibility | 组合是否可见 | visible | hidden | visible | |
x | 组合 x 坐标 | number | 0 | |
y | 组合 y 坐标 | number | 0 | |
z | 组合 z 坐标 | number | 0 | |
zIndex | 组合渲染层级 | number | 0 |
组合大小,快捷设置组合宽高,支持三种配置方式:
pointerEvents
属性控制图形如何响应交互事件,可参考 MDN 文档。
可选值有:visible
| visiblepainted
| visiblestroke
| non-transparent-pixel
| visiblefill
| visible
| painted
| fill
| stroke
| all
| none
| auto
| inherit
| initial
| unset
简而言之,fill
、stroke
和 visibility
都可以独立或组合影响拾取判定行为。目前支持以下关键词:
auto
:默认值,等同于 visiblepainted
none
:永远不会成为响应事件的目标visiblepainted
:满足以下条件才会响应事件:
visibility
设置为 visible
,即图形为可见的fill
取非 none
的值;或者在图形描边区域触发同时 stroke
取非 none
的值visiblefill
:满足以下条件才会响应事件:
visibility
设置为 visible
,即图形为可见的fill
取值的影响visiblestroke
:满足以下条件才会响应事件:
visibility
设置为 visible
,即图形为可见的stroke
取值的影响visible
:满足以下条件才会响应事件:
visibility
设置为 visible
,即图形为可见的fill
和 stroke
取值的影响painted
:满足以下条件才会响应事件:
fill
取非 none
的值;或者在图形描边区域触发同时 stroke
取非 none
的值visibility
取值的影响fill
:满足以下条件才会响应事件:
fill
取值的影响visibility
取值的影响stroke
:满足以下条件才会响应事件:
stroke
取值的影响visibility
取值的影响all
:只要进入图形的填充和描边区域就会响应事件,不会受 fill
、stroke
、visibility
的取值影响使用示例:
// 示例1:只有描边区域响应事件const graph = new Graph({combo: {style: {fill: 'none',stroke: '#000',lineWidth: 2,pointerEvents: 'stroke', // 只有描边响应事件},},});// 示例2:完全不响应事件const graph = new Graph({combo: {style: {pointerEvents: 'none', // 组合不响应任何事件},},});
可选值有: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
当组合处于收起状态时(collapsed
为 true
),可以为其配置特殊的样式。收起时的样式属性以 collapsed
为前缀。
为收起状态的组合设置不同的外观:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' },{ id: 'node2', combo: 'combo1' },],combos: [{ id: 'combo1', style: { collapsed: true } }],},combo: {style: {collapsedFill: '#1783FF',collapsedStroke: '#000',collapsedLineWidth: 2,collapsedSize: 40,collapsedMarkerFill: '#fff',collapsedMarkerFontSize: 12,},},});graph.render();
以下为收起时样式的完整配置:
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
collapsedCursor | 组合收起时的鼠标移入样式,配置项 | 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 | 组合收起时是否显示标记,配置项 | 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] | 32 | |
collapsedStroke | 组合收起时的描边色 | string | 默认与展开时的 stroke 一致 | |
collapsedStrokeOpacity | 组合收起时的描边色透明度 | number | string | 默认与展开时的 strokeOpacity 一致 | |
collapsedVisibility | 组合收起时是否可见 | visible | hidden | 默认与展开时的 visibility 一致 |
当 collapsedMarker
为 true
时显示的标记,用于显示收起组合内包含的元素数量。
可以自定义收起标记显示的内容:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' },{ id: 'node2', combo: 'combo1' },{ id: 'node3', combo: 'combo1' },],combos: [{ id: 'combo1', style: { collapsed: true } }],},combo: {style: {collapsedMarkerType: 'child-count',collapsedMarkerFill: '#1783FF',collapsedMarkerFontSize: 14,collapsedMarkerFontWeight: 'bold',},},});graph.render();
以下为收起时标记样式的完整配置:
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
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 |
徽标是组合上显示的小标记,通常用于展示状态、数量或其他辅助信息。支持多个徽标同时显示,并可自定义位置。
为组合添加一个简单的徽标:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {badges: [{ text: 'NEW' }, // 默认显示在上方],},},});graph.render();
为组合添加多个不同位置的徽标:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {badge: true, // 是否显示徽标badges: [{ text: 'A', placement: 'right-top' },{ text: 'Important', placement: 'right' },{ text: 'Notice', placement: 'right-bottom' },],badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // 徽标的背景色板badgeFontSize: 7, // 徽标字体大小},},});graph.render();
完全自定义徽标的外观:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {badges: [{text: '99+',placement: 'right-top',backgroundFill: '#FF4D4F', // 红色背景fill: '#fff', // 白色文字fontSize: 10,padding: [2, 6],backgroundRadius: 8,},],},},});graph.render();
以下为完整的徽标样式配置:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
badge | 组合是否显示徽标 | boolean | true |
badgePalette | 组合徽标的背景色板 | string[] | [#7E92B5 , #F4664A , #FFBE3A ] |
badges | 组合徽标设置 | BadgeStyleProps[] | - |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
background | 组合徽标是否显示背景 | boolean | true |
backgroundCursor | 组合徽标背景鼠标移入样式,配置项 | string | default |
backgroundFill | 组合徽标背景填充色。若不指定,优先考虑 badgePalette 按顺序分配 | string | - |
backgroundFillOpacity | 组合徽标背景填充透明度 | number | 1 |
backgroundFilter | 组合徽标背景滤镜 | string | - |
backgroundHeight | 组合徽标背景高度 | number | string | - |
backgroundLineDash | 组合徽标背景虚线配置 | number | string |(number | string )[] | - |
backgroundLineDashOffset | 组合徽标背景虚线偏移量 | number | - |
backgroundLineWidth | 组合徽标背景描边线宽 | number | - |
backgroundRadius | 组合徽标背景圆角半径 - number: 统一设置四个圆角半径 - number[]: 分别设置四个圆角半径,会补足缺省的分量 - string: 与 CSS padding 属性类似,使用空格分隔 | number | number[] | string | 0 |
backgroundShadowBlur | 组合徽标背景阴影模糊程度 | number | - |
backgroundShadowColor | 组合徽标背景阴影颜色 | string | - |
backgroundShadowOffsetX | 组合徽标背景阴影 X 方向偏移 | number | - |
backgroundShadowOffsetY | 组合徽标背景阴影 Y 方向偏移 | number | - |
backgroundStroke | 组合徽标背景描边颜色 | string | - |
backgroundStrokeOpacity | 组合徽标背景描边透明度 | number | string | 1 |
backgroundVisibility | 组合徽标背景是否可见 | visible | hidden | - |
fill | 组合徽标文字颜色 | string | - |
fontFamily | 组合徽标字体族 | string | - |
fontSize | 组合徽标字体大小 | number | 8 |
fontStyle | 组合徽标字体样式 | normal | italic | oblique | normal |
fontVariant | 组合徽标字体变种 | normal | small-caps | string | normal |
fontWeight | 组合徽标字体粗细 | number | string | normal |
lineHeight | 组合徽标行高 | string | number | - |
lineWidth | 组合徽标行宽 | string | number | - |
maxLines | 组合徽标文本最大行数 | number | 1 |
offsetX | 组合徽标在 x 轴方向上的偏移量 | number | 0 |
offsetY | 组合徽标在 y 轴方向上的偏移量 | number | 0 |
padding | 组合徽标内边距 | number | number[] | 0 |
placement | 组合徽标相对于组合主图形的位置。若不指定,默认从右上角顺时针依次排放 | left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | - |
text | 组合徽标文字内容 | string | - |
textAlign | 组合徽标文本水平对齐方式 | start | center | middle | end | left | right | left |
textBaseline | 组合徽标文本基线 | top | hanging | middle | alphabetic | ideographic | bottom | alphabetic |
textDecorationColor | 组合徽标文本装饰线颜色 | string | - |
textDecorationLine | 组合徽标文本装饰线 | string | - |
textDecorationStyle | 组合徽标文本装饰线样式 | solid | double | dotted | dashed | wavy | solid |
textOverflow | 组合徽标文本溢出处理方式 | clip | ellipsis | string | clip |
visibility | 组合徽标是否可见 | visible | hidden | - |
wordWrap | 组合徽标文本是否自动换行 | boolean | - |
zIndex | 组合徽标渲染层级 | number | 3 |
标签用于显示组合的文本信息,支持丰富的文本样式配置和灵活的位置布局。
为组合添加基本的文本标签:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {labelText: '销售部门', // 标签文字内容labelFill: '#1A1A1A', // 标签文字颜色labelFontSize: 14, // 标签字体大小labelPlacement: 'bottom', // 标签位置:底部},},});graph.render();
配置支持多行显示的标签:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 120,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {labelText: '这是一个支持多行显示的组合标签文本内容',labelWordWrap: true, // 开启文本换行labelMaxWidth: 100, // 最大宽度 100pxlabelMaxLines: 3, // 最多显示 3 行labelTextAlign: 'center', // 文本居中对齐labelFontSize: 12,},},});graph.render();
创建具有特殊样式的标签:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {labelText: 'IMPORTANT',labelFill: '#FF4D4F', // 红色文字labelFontSize: 16,labelFontWeight: 'bold', // 粗体labelFontStyle: 'italic', // 斜体labelTextDecorationLine: 'underline', // 下划线labelLetterSpacing: 2, // 字间距labelPlacement: 'top',},},});graph.render();
以下为完整的标签样式配置:
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
label | 是否显示组合标签 | boolean | true | |
labelCursor | 鼠标移入组合标签时显示的样式,配置项 | 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 | 组合标签最大宽度,配置项 | number | string | 200% | |
labelOffsetX | 组合标签在 x 轴方向上的偏移量 | number | 0 | |
labelOffsetY | 组合标签在 y 轴方向上的偏移量 | number | 0 | |
labelPadding | 组合标签内边距 | number | number[] | 0 | |
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 属性值。比如 labelOpacity 代表标签透明度 | TextStyleProps | - |
标签相对于组合主图形的位置,可选值有:
center
:标签位于组合中心top
、bottom
、left
、right
:标签位于组合的上、下、左、右方top-left
、top-right
、bottom-left
、bottom-right
:标签位于组合的四个角left-top
、left-bottom
、right-top
、right-bottom
:标签位于组合边的端点开启自动折行 labelWordWrap
后,超出该宽度则换行:
50%
表示标签宽度不超过组合宽度的一半比如,设置多行标签文字:
{"labelWordWrap": true,"labelMaxWidth": 200,"labelMaxLines": 3}
标签背景为标签文字提供背景装饰,可以提升标签的可读性和视觉效果。
为标签添加简单的背景:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {labelText: '重要组合',labelFill: '#fff', // 白色文字labelBackground: true, // 启用背景labelBackgroundFill: '#1783FF', // 蓝色背景labelBackgroundPadding: [4, 8], // 内边距:垂直4px,水平8pxlabelBackgroundRadius: 4, // 圆角半径},},});graph.render();
创建带渐变效果的标签背景:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {labelText: 'VIP组合',labelFill: '#fff',labelFontWeight: 'bold',labelBackground: true,labelBackgroundFill: 'linear-gradient(45deg, #FF6B6B, #4ECDC4)', // 渐变背景labelBackgroundPadding: [6, 12],labelBackgroundRadius: 20, // 大圆角labelBackgroundShadowColor: 'rgba(0,0,0,0.2)',labelBackgroundShadowBlur: 4,labelBackgroundShadowOffsetY: 2,},},});graph.render();
创建只有描边的标签背景:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {labelText: '边框标签',labelFill: '#1783FF',labelBackground: true,labelBackgroundFill: 'transparent', // 透明背景labelBackgroundStroke: '#1783FF', // 蓝色描边labelBackgroundLineWidth: 2, // 描边宽度labelBackgroundPadding: [4, 8],labelBackgroundRadius: 8,},},});graph.render();
以下为完整的标签背景样式配置:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
labelBackground | 组合标签背景是否显示 | boolean | false |
labelBackgroundCursor | 组合标签背景鼠标移入样式,配置项 | 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 属性值。例如 labelBackgroundOpacity 代表标签背景透明度 | RectStyleProps | - |
光晕效果用于突出显示组合,通常在鼠标悬停、选中或激活状态下使用,为组合周围添加发光效果。
为组合添加简单的光晕效果:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {halo: true, // 启用光晕haloStroke: '#1783FF', // 蓝色光晕haloLineWidth: 8, // 光晕宽度haloStrokeOpacity: 0.3, // 光晕透明度},},});graph.render();
创建彩色渐变的光晕效果:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {halo: true,haloStroke: '#FF4D4F', // 红色光晕haloLineWidth: 12, // 较粗的光晕haloStrokeOpacity: 0.5,haloFilter: 'blur(2px)', // 模糊滤镜效果},},});graph.render();
在状态切换时使用光晕效果:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1' }],},combo: {style: {// 默认状态下不显示光晕halo: false,},state: {// 悬停状态显示橙色光晕hover: {halo: true,haloStroke: '#FF7A00',haloLineWidth: 10,haloStrokeOpacity: 0.4,},// 选中状态显示绿色光晕selected: {halo: true,haloStroke: '#52C41A',haloLineWidth: 6,haloStrokeOpacity: 0.6,},},},});graph.render();
以下为完整的光晕样式配置:
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
halo | 是否显示组合光晕 | boolean | false | |
haloCursor | 组合光晕鼠标移入样式,配置项 | string | default | |
haloDraggable | 组合光晕是否允许拖拽 | boolean | true | |
haloDroppable | 组合光晕是否允许接收被拖拽的元素 | boolean | false | |
haloFill | 光晕填充色 | string | 与主图形的填充色 fill 一致 | |
haloFillRule | 组合光晕填充规则 | nonzero | evenodd | - | |
haloFilter | 组合光晕滤镜效果,如 'blur(2px)' 可创建模糊效果 | string | - | |
haloLineWidth | 组合光晕描边宽度,控制光晕的粗细程度 | number | 12 | |
haloPointerEvents | 组合光晕效果是否响应指针事件,配置项 | string | none | |
haloStroke | 组合光晕描边色,此属性用于设置组合周围光晕的颜色,帮助突出显示组合 | string | #99add1 | |
haloStrokeOpacity | 组合光晕描边色透明度,建议使用 0.2-0.6 的值以获得自然的光晕效果 | number | 0.25 | |
haloVisibility | 组合光晕可见性 | visible | hidden | visible | |
haloZIndex | 组合光晕渲染层级,通常设置为负值以确保光晕在组合主图形下方 | number | -1 | |
halo{StyleProps} | 更多光晕样式配置,参考 DisplayObject 配置项。例如 haloFillOpacity 代表光晕填充色透明度 | DisplayObject | - |
光晕使用建议:
图标用于在组合中显示文字或图片内容,通常位于组合的中心位置,可以用来表示组合的类型或功能。
使用文字作为组合的图标:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {combos: [{ id: 'combo1' }],},combo: {style: {iconText: 'A', // 显示字母 AiconFill: '#1783FF', // 蓝色文字iconFontSize: 24, // 大字体iconFontWeight: 'bold', // 粗体},},});graph.render();
使用图片作为组合的图标:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {combos: [{ id: 'combo1' }],},combo: {style: {fill: '#1890FF',iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',iconWidth: 32,iconHeight: 32,},},});graph.render();
创建带有特殊样式的文字图标:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 240,height: 100,autoFit: 'center',data: {combos: [{ id: 'combo1' }],},combo: {style: {iconText: '部门',iconFill: '#FF4D4F', // 红色文字iconFontSize: 16,iconFontWeight: 'bold',iconFontStyle: 'italic', // 斜体iconTextDecorationLine: 'underline', // 下划线iconLetterSpacing: 1, // 字间距},},});graph.render();
以下为完整的图标样式配置:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
icon | 是否显示组合图标 | boolean | true |
iconCursor | 组合图标鼠标移入样式,配置项 | string | default |
iconFill | 组合图标文字颜色 | string | - |
iconFillOpacity | 组合图标文字颜色透明度 | number | 1 |
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 |
iconOffsetX | 组合图标在 x 轴方向上的偏移量 | number | 0 |
iconOffsetY | 组合图标在 y 轴方向上的偏移量 | number | 0 |
iconOpacity | 组合图标透明度 | number | 1 |
iconRadius | 组合图标圆角半径(仅对矩形图标有效) | number | 0 |
iconSrc | 组合图片来源。其优先级高于 iconText,支持本地图片和网络图片 | string | - |
iconText | 组合图标文字内容,支持文字、Unicode 字符等 | string | - |
iconTextAlign | 组合图标文本水平对齐方式 | start | center | middle | end | left | right | center |
iconTextBaseline | 组合图标文本基线 | top | hanging | middle | alphabetic | ideographic | bottom | middle |
iconTextDecorationColor | 组合图标文本装饰线颜色 | string | - |
iconTextDecorationLine | 组合图标文本装饰线,如下划线、删除线等 | string | - |
iconTextDecorationStyle | 组合图标文本装饰线样式 | solid | double | dotted | dashed | wavy | solid |
iconTextOverflow | 组合图标文本溢出处理方式 | clip | ellipsis | string | clip |
iconVisibility | 组合图标是否可见 | visible | hidden | visible |
iconWidth | 组合图标宽度,当使用图片图标时用于控制图片尺寸 | number | 主图形宽度的一半 |
iconWordWrap | 组合图标文本是否自动换行 | boolean | false |
iconZIndex | 组合图标渲染层级 | number | 1 |
icon{StyleProps} | 更多图标样式配置,参考图标的具体类型配置项。例如 iconStroke 代表图标描边颜色 | - | - |
图标使用建议:
iconSrc
(图片)的优先级高于 iconText
(文字),如果同时设置,会优先显示图片在一些交互行为中,比如点击选中一个组合或鼠标悬停激活一个边,仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中,我们需要为不同的状态设置不同的图元素样式,以响应该图元素状态的变化。
G6 提供了几种内置的状态,包括选中(selected)、高亮(highlight)、激活(active)、不活跃(inactive)和禁用(disabled)。此外,它还支持自定义状态,以满足更特定的需求。对于每个状态,开发者可以定义一套样式规则,这些规则会覆盖元素的默认样式。
数据结构如下:
type ComboState = {[state: string]: ComboStyle;};
例如,当组合处于 focus
状态时,可以为其添加一个宽度为 3 且颜色为橙色的描边。
const graph = new Graph({combo: {state: {focus: {lineWidth: 3, // 描边宽度stroke: 'orange', // 描边颜色},},},});
效果如下图所示:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 200,height: 100,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo1' }],combos: [{ id: 'combo1', states: ['focus'] }],},combo: {state: {focus: {lineWidth: 3,stroke: 'orange',fill: 'orange',fillOpacity: 0.2,},},},});graph.render();
定义组合的动画效果,支持下列两种配置方式:
{"combo": {"animation": false}}
阶段动画是指组合在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括:
enter
: 组合进入画布时的动画update
: 组合更新时的动画exit
: 组合离开画布时的动画show
: 组合从隐藏状态显示时的动画hide
: 组合隐藏时的动画collapse
: 组合收起时的动画expand
: 组合展开时的动画你可以参考 动画范式 使用动画语法来配置组合,如:
{"combo": {"animation": {"update": [{"fields": ["x", "y"], // 更新时只对 x 和 y 属性进行动画"duration": 1000, // 动画持续时间"easing": "linear" // 缓动函数}],}}
也可以使用内置的动画效果:
{"combo": {"animation": {"enter": "fade", // 使用渐变动画"update": "translate", // 使用平移动画"exit": "fade" // 使用渐变动画}}}
你可以传入 false 来关闭特定阶段的动画:
{"combo": {"animation": {"enter": false // 关闭组合入场动画}}}
定义组合的色板,即预定义组合颜色池,并根据规则进行分配,将颜色映射到 fill
属性。
有关色板的定义,请参考 色板。
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
type | 指定当前色板类型。 - group : 离散色板 - value : 连续色板 | group | value | group |
field | 指定元素数据中的分组字段。若不指定,默认取 id 作为分组字段 | string | ((datum) => string) | id |
color | 色板颜色。如果色板注册过,可以直接指定其注册名,也接受一个颜色数组 | string | string[] | - |
invert | 是否反转色板 | boolean | false |
如将一组数据按 category
字段分配组合颜色,使得同类别的组合颜色相同:
{"combo": {"palette": {"type": "group","field": "category","color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"]}}}
效果如下图所示:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 600,height: 100,data: {combos: new Array(8).fill(0).map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),},layout: { type: 'grid', cols: 8 },combo: {style: { fillOpacity: 0.4 },palette: {type: 'group',field: 'category',color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],},},});graph.render();
也可以使用默认配置:
{"combo": {"palette": "tableau" // tableau 为色板名,默认根据 ID 分配颜色}}
效果如下图所示:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 600,height: 100,data: {combos: new Array(8).fill(0).map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),},layout: { type: 'grid', cols: 8 },combo: {style: { fillOpacity: 0.4 },palette: 'tableau',},});graph.render();