インタラクションイベント + インスペクター

options.callbacks は、ユーザー * の行動* — クリック、ホバー、 選択とキャンバスのジェスチャ。各コールバックはノードまたはエッジを受け取ります。 という懸念があるため、アプリの接続はイベントごとに 1 行で済みます。

グラフを操作して以下のログを確認します。ノードをクリックし、 エッジ、背景のパンまたはズームを行います。 (これは、data イベントとは異なります バス、何が変更されたを報告します。）

グラフをクリック、ホバー、選択またはパン…

オプション

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