Interaction events + inspector

options.callbacks is how you react to what the user does — clicks, hovers, selections, and canvas gestures. Each callback receives the Node or Edge it concerns, so wiring up an app is a one-liner per event.

Interact with the graph and watch the log below: click a node, hover across the edges, pan or zoom the background. (This is distinct from the data event bus, which reports what changed.)

Click, hover, select or pan the graph…

Options

// Every interaction callback receives the relevant Node/Edge (and the DOM event).
// In a real app you'd act on these directly; here each one is forwarded to the
// page's event log.
function createOptions(onEvent) {
    return {
        callbacks: {
            onNodeClick: (event, node) => onEvent('click', `node ${node.id}`),
            onNodeHoverIn: (event, node) => onEvent('hover in', `node ${node.id}`),
            onNodeHoverOut: (event, node) => onEvent('hover out', `node ${node.id}`),
            onNodeSelect: (node) => onEvent('select', `node ${node.id}`),
            onEdgeClick: (event, edge) => onEvent('click', `edge ${edge.id}`),
            onCanvasClick: () => onEvent('canvas', 'background click'),
            onCanvasZoom: () => onEvent('canvas', 'zoom / pan')
            // onSimulationTick fires on every animation frame — far too noisy to
            // log. Use the throttled onSimulationSlowTick if you need a heartbeat.
        }
    }
}

Data

const data = {
    nodes: [
        { id: 'alice' },
        { id: 'bob' },
        { id: 'carol' },
        { id: 'dave' },
        { id: 'erin' },
        { id: 'frank' }
    ],
    edges: [
        { from: 'alice', to: 'bob' },
        { from: 'alice', to: 'carol' },
        { from: 'bob', to: 'dave' },
        { from: 'carol', to: 'dave' },
        { from: 'dave', to: 'erin' },
        { from: 'erin', to: 'frank' }
    ]
}