交互事件+检查员

options.callbacks 是您对用户所做的的反应 - 单击、悬停、选择和画布手势。每个回调都会接收它所关注的 Node 或 Edge，因此连接应用程序对于每个事件来说都是一行代码。

与图表交互并观看下面的日志：单击节点、将鼠标悬停在边缘、平移或缩放背景。（这与 数据事件总线不同，后者报告更改的内容。）

单击、悬停、选择或平移图表...

选项数据

// 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.
        }
    }
}

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' }
    ]
}

交互事件+检查员 ​

交互事件+检查员