图形分组 Group
⚠️注意:
图形分组 Group 与 节点分组 Group 虽然都名为 Group,但属于不同层次的概念。
- 图形分组针对 图形 Shape 层次的分组;
- 节点分组 Group 是针对 节点 的分组,与数据结构中的层次、分组对应。
什么是图形分组 Group
图形分组 group 类似于 SVG 中的 <g>
标签:元素 g
是用来组合图形对象的容器。在 group 上添加变换(例如剪裁、旋转、放缩、平移等)会应用到其所有的子元素上。在 group 上添加属性(例如颜色、位置等)会被其所有的子元素继承。此外, group 可以多层嵌套使用,因此可以用来定义复杂的对象。
在 G6 中,Graph 的一个实例中的所有节点属于同一个变量名为 nodeGroup
的 group,所有的边属于同一个变量名为 edgeGroup
的 group。节点 group 在视觉上的层级(zIndex)高于边 group,即所有节点会绘制在所有边的上层。
如下图(左)三个节点属于 nodeGroup
,两条边属于 edgeGroup
, nodeGroup
层级高于 edgeGroup
,三个节点绘制在两条边的上层。下图(右)是(左)图的节点降低透明度后的效果,可以更清晰看到边绘制在节点下方。
(左)节点和边的图形分组 Group 演示。(右)给左图的节点降低了透明度。
何时使用图形分组 Group
自定义节点、自定义边时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。
例如,如下图中的节点 A 有一个包含节点 A 中所有图形的 group,该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点,有一个包含节点 B 中所有图形的 group,该 group 包含了 circle 图形、rect 图形、文本图形。
如何使用图形分组 Group
声明实例
const group = new Group(cfgs);
实例方法
- addGroup(cfgs)
向分组中添加新的分组。
const subGroup = group.addGroup({
id: 'rect',
});
- addShape(type, cfgs)
向分组中添加新的图形。
const keyShape = group.addShape('rect', {
attrs: {
stroke: 'red',
},
});
提示:在分组上添加的 clip
, transform
等会影响到该分组中的所有元素(子分组或图形)。