3.6 KiB
| title | order |
|---|---|
| Graphics Group | 2 |
⚠️Attention:
Graphics Group and Node Combo are totally different concepts with the same name Group.
- Graphics Group is the group for Graphics Shape;
- Node Combo is the group for Nodes, which is related to the hierarchy and groups in the data.
What
Graphics Group (hereinafter referred to as Group) in G6 is similar to <g> tag in SVG : Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects.
In G6, all the nodes instances in a Graph is grouped by a Group named nodeGroup, all the edges instances are grouped by edgeGroup. And the visual level (zIndex) of nodeGroup is higher than edgeGroup, which means all the nodes will be drawed on the top of all the edges.
As shown in the figure below: The three nodes in (Left) are belong to the nodeGroup, the two edges are belong to the edgeGroup. The visual level (zIndex) of nodeGroup is higher than edgeGroup, so the three nodes are drawed on the top of the two edges. We reduce the opacity of the nodes in (Right) to clearly see the edges are drawed under the nodes.
(Left) Demonstration of the graphics Group of nodes and edges. (Right) Nodes with opacity.
When
Graphics Group is refered by Custom Node and Custom Edge. It is a mechanism to combine and manage the graphis shapes.
For example, there is a node A which has a group contains all the graphics shapes (a circle and a text shape) of A. Node B is a custom node which also has a group contains all the graphics shapes (a circle, a rect, and a text shape) of B.
How
The functions below will be used in Custom Node and Custom Edge.
Get group of item
// Find the graphics group of the item
const group = item.getContainer();
// equal to
const group = item.get('group');
Functions of Group
- addGroup(cfgs)
Add a new group to the group.
const subGroup = group.addGroup({
id: 'rect',
});
- addShape(type, cfgs)
Add a shape to the group.
const keyShape = group.addShape('rect', {
attrs: {
stroke: 'red',
},
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
name: 'rect-shape',
});
Tips: The clip, transform, and other operations on a group will affect all the elements in the group.