g6/docs/api/Group.en.md

title	order
Graphics Group	11

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. For more information about Group, please refer to Graphics Group document.

Instance Declaration

const group = new Group(cfgs);

Functions

addGroup(cfg)

Add a new group to the group.

Parameters

Name	Type	Description
cfg	Object	Not required. It is the configurations of the group

The cfg above is not required, and it contains:

Name	Type	Description
id	String	The unique id of this group
name	String	The name of the shape which can be not unique. It is required for each shape in G6 3.3. Besides, name can be used for searching this shape, e.g. const shape = group.find(element => element.name === 'shape-name'). The usage of find can be found at find(fn)
visible	Boolean	Whether the group is visible
capture	Boolean	Whether the group is capturable
draggable	Boolean	Whether the group is allowed to response dragstart, drag, and dragend events. E.g. when user add a group into a custom node with draggable: true, the group will response the dragging events on the node, and the 'drag-node' in the modes of the graph instance will take effect on the group
zIndex	Number	The visual index of the shape, similar to z-index of DOM. It is not required. group.sort() will sort the visual index of the shapes inside the group according to their zIndex

Usage

// No configurations
group.addGroup();

// Configured
group.addGroup({
  id: 'groupId',
  draggable: true,
  // other configurations
});

addShape(type, cfgs)

Add a new shape into the group
⚠️Attention: the clip and transform operations will affect all the shapes in the group. The graphics and their properties are introduced in Shape API。

Parameters

Name	Type	Description
type	String	The type of the shape. Options: 'rect', 'circle', 'fan', 'ellipse', 'marker', 'image', and so on. Please refer to Graphics Shape Properties document
cfg	Object	The configurations of the shape.

The cfg above contains:

Name	Type	Description
attrs	Object	The style configurations for the shape. e.g. {x: 0, y: 10, fill: '#0f0'}
name	String	The name of the shape which can be not unique. It is required for each shape in G6 3.3. Besides, name can be used for searching this shape, e.g. const shape = group.find(element => element.name === 'shape-name'). The usage of find can be found at find(fn)
visible	Boolean	Whether the shape is visible
capture	Boolean	Whether the shape is capturable by mouse events
draggable	Boolean	Whether the shape is allowed to response dragstart, drag, and dragend events. E.g. when user add a shape into a custom node with draggable: true, the shape will response the dragging events on the node, and the 'drag-node' in the modes of the graph instance will take effect
zIndex	Number	The visual index of the shape, similar to z-index of DOM. It is not required. group.sort() will sort the visual index of the shapes inside the group according to their zIndex

Usage

group.addShape('rect', {
  attrs: {
    x: 0, // required
    y: 0, // required
    fill: 'red',
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
    opacity: 0.8,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'rect-shape',
  zIndex: 1,
});

contain(child)

Whether the group contains the child.
The type of the return value: Boolean.

Parameters

Name	Type	Description
child	Group / Shape	A sub group or an instance of shape.

Usage

const has = group.contain(child);

find(fn)

Find the first element that matches the rule.

Parameters

Name	Type	Description
fn	Function	Customized callback function.

Usage

const child = group.find(function(item) {
  return item.attr('fill') === 'red'; // Find the first graphics filled with red
});

findById(id)

Find the element by its id.
The type of the return value: Object。

Parameters

Name	Type	Description
id	String	The id of the group.

Usage

const group1 = group.findById('group1');

findAll(fn)

Find all the elements that match the rule.
The type of the return value: [ Object ]

Parameters

Name	Type	Description
fn	Function	Customized callback function.

Usage

const children = group.findAll(function(item) {
  return item.get('id') < 10; // get all the elements with the id smaller than 10
});

getShape(x,y)

Get the top shape which is on (x, y).
The type of the return value: Object

Parameters

Name	Type	Description
x	number	x coordinate
y	number	y coordinate

Usage

// Get the top element on (10, 30)
const element = group.getShape(10, 30);

getFirst()

Get the first element of the group.
The type of the return value: Object

Usage

const child = group.getFirst();

// Equal to
const childrens = group.get('children');
const child = childrens[0];

getLast()

Get the last element of the group.
The type of the return value: Object

Usage

const child = group.getLast();

// Equal to
const childrens = group.get('children');
const child = childrens[childrens.length - 1];

getChildByIndex(index）

Get the index-th child of the group started from 0.
The type of the return value: Object

Parameters

Name	Type	Description
index	number	The index of the child. 0 by default.

Usage

const child = group.getChildByIndex(2);

removeChild(child)

Remove a group or a graphics from the group.

Parameters

Name	Type	Description
child	Group / Shape	A sub group or an instance of Shape.

Usage

group.removeChild(child);

sort()

Sort method.
In general, it is called for ordering the children of the group.

Typical scenerio: we set index for each shape when add shape by group.addShape(). After adding, sort the shapes by calling group.sort().

Usage

group.sort();

clear()

Clear all the children in the group.

Usage

group.clear();