أحداث التفاعل + المفتش

options.callbacks هي الطريقة التي تتفاعل بها مع ما يفعله المستخدم ** — النقرات، التمرير، التحديدات وإيماءات القماش. يتلقى كل رد اتصال العقدة أو حافةها المخاوف، لذا فإن توصيل التطبيق هو عبارة عن سطر واحد لكل حدث.

تفاعل مع الرسم البياني وشاهد السجل أدناه: انقر فوق عقدة، وقم بالتمرير فوقها الحواف أو تحريك الخلفية أو تكبيرها. (وهذا يختلف عن حدث 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' }
    ]
}