This tutorial aims to help you understand how groups work and how to use them. See the transformations tutoral for a basic introduction.
Good practices with groups
Grouping can become tricky if you don't follow some good practice we have seen working with our users.
In general it is a good practice to use the
data of the nodes or their
ids, but don't rely on their
In our examples, we demonstrate the
nodeGenerator function, which returns a
RawNode. In this
RawNode we recommend not to pass attributes as they overwrite the attributes from
classes. You can see the attributes you set in the
nodeGenerator function as adding an
!important in a
The onCreated hook
onCreated hook will called only when a new group is created. New groups are created when nodes with a new
location are created. When
disabling/enabling the grouping, or when
refreshing the transformation, existing groups are only
updated and the
onCreated hook is not called.
Layout open groups
Make sure your layout is called
When you open a group node, you likelly want to layout its content. It can be done in multiple ways but we recommend to use the ogma.events.transformationRefresh event. Indeed, this event is called everytime the grouping is refreshed, while the
onCreated hook is called only on the creation of a node.
Move only the necessary nodes
When you layout an open node, it is likelly that its radius change, thus the layout of the global graph might have to be re-run. But giving freedom of movement to all the nodes of the graph might be confusing to the user. We recommand to use the pinning feature.