Transformation examples

Transformations reshape what’s drawn without touching your underlying data. Every demo runs live in your browser — use the controls, drag and zoom.

Grouping & collapse

addNodeGrouping collapses sets of nodes into a single group node — here, one group per data.category. The original graph is untouched; “Ungroup” restores it with transformations.clear().

nodus.transformations.addNodeGrouping({
  selector: (node) => true,                                 // which nodes participate
  groupIdFunction: (node) => node.getData('category'),      // group key per node
  nodeGenerator: (nodes, groupId) => ({                     // the group node's look + data
    attributes: { color: '#0f766e', radius: 24 },
    data: { label: groupId + ' (' + nodes.size + ')' },
  }),
});

// later — restore the original graph
await nodus.transformations.clear();

Group by category, then ungroup Open in new tab ↗

You can also expand or collapse an individual group node:

nodus.transformations.expandGroup({ node: groupNode });
nodus.transformations.collapseGroup({ node: groupNode });

Filtering

addNodeFilter keeps only the nodes whose criteria returns true and hides the rest — the underlying graph is unchanged. transformations.clear() removes the filter and shows everything again.

// keep only nodes in category 'A'
nodus.transformations.addNodeFilter({ criteria: (n) => n.getData('category') === 'A' });

// later — show everything again
await nodus.transformations.clear();

Filtering Open in new tab ↗

Edge grouping

addEdgeGrouping collapses parallel edges between the same pair of nodes into a single edge. Call transformations.clear() to restore the originals.

// collapse parallel edges (e.g. four A -> B edges) into one
nodus.transformations.addEdgeGrouping({});

// later — restore the original edges
await nodus.transformations.clear();

Edge grouping Open in new tab ↗

The transformations API also covers edge grouping, clustering, filters, neighbour generation and drill-downs — see API: Generators, parsers & geometry.