Events

Use graph.on() to listen for events. See the Graph API for listener methods and the event guide for interactive examples.

Element events

Click and pointer events

Callback fields

On a node click, read the target, business data, and coordinates. Use the original mouse event to check whether Shift was held.

graph.on('node:click', (event) => {
  console.log({
    target: { type: event.targetType, id: event.targetId },
    data: event.data,
    client: event.client,
    canvas: event.canvas,
    graph: event.graph,
    shiftKey: event.nativeEvent.shiftKey,
  });
});

Picking and gestures

Hit testing checks nodes, edges, Combos, then the canvas. When the pointer changes targets, the old target receives pointerleave, followed by pointerover, pointerenter, and pointermove on the new target. Over a Combo background, canvas:pointermove also fires and the wheel emits canvas:wheel. Dragging can suppress the following click.

Selection events

Enable click-select, brush-select, or lasso-select to receive the corresponding events. They fire after selection state is written.

Callback fields

With brush-select enabled, listen for brush:end to read the selected nodes when the gesture ends.

graph.on('brush:end', ({ nodeIds }) => {
  console.log('Selected nodes', nodeIds);
});

Lasso events report the nodes hit by the current gesture. Use findNodesByState('selected') and findEdgesByState('selected') for the full graph selection. Selection and drag guide

Drag events

drag-node handles node and Combo drags. drag-edge handles endpoint drags.

Callback fields

At the end of the drag, use nodeIds to look up the positions of all dragged nodes.

graph.on('node:dragend', ({ nodeIds }) => {
  const positions = nodeIds.map((id) => graph.getElementPosition(id));
  console.log(positions);
});

Lifecycle and data events

Use these events to track layout, drawing, and data changes. Rendering, layout, and data updates

Layout and rendering

render(), layout(), and setData() emit layout events when they run a layout. A cancelled layout may skip its end events.

Register a one-time afterrender listener before the first render(). Use datachange to read the node and edge counts after each data replacement.

graph.once('afterrender', ({ nodeCount, edgeCount }) => {
  console.log('First draw', nodeCount, edgeCount);
});
await graph.render();

graph.on('datachange', ({ nodeCount, edgeCount }) => {
  console.log('Data replaced', nodeCount, edgeCount);
});
await graph.setData({
  nodes: [{ id: 'A', x: 0, y: 0 }, { id: 'B', x: 120, y: 0 }],
  edges: [{ source: 'A', target: 'B' }],
});

Data updates and Combos

EventEmitter

Use EventEmitter to send custom events between UI components. Pass a rendered graph, the toolbar’s Reset view button, and a status element to bindResetView(). Clicking the button restores the initial view and updates the status. Call the returned cleanup function when the page unmounts.

import { EventEmitter, type Graph } from '@antv/g6-lite';

export function bindResetView(graph: Graph, button: HTMLButtonElement, status: HTMLElement) {
  const events = new EventEmitter();
  const resetCamera = () => graph.resetCamera();
  const showStatus = () => {
    status.textContent = 'View reset';
  };
  const onClick = () => events.emit('view:reset');

  events.on('view:reset', resetCamera);
  events.on('view:reset', showStatus);
  button.addEventListener('click', onClick);

  return () => {
    button.removeEventListener('click', onClick);
    events.off('view:reset', resetCamera);
    events.off('view:reset', showStatus);
  };
}