Live/streaming grafiek

Grafieken zijn zelden statisch. graph.updateData(nodes, edges) voegt een batch samen veranderingen in één keer – nieuwe id’s worden toegevoegd, bestaande bijgewerkt – waardoor het de natuurlijke pasvorm voor een live feed: monitoring, activiteitenstreams, incrementele belastingen. Paar met renderer.fitAndCenter() om de groeiende grafiek in beeld te houden, en luister verder dataBatchChanged om uw eigen toestand in de pas te houden.

Deze demo streamt elke 1,4 seconde een knooppunt en snoeit de oudste om aan het rollen te blijven venster — de teller reageert puur op dataBatchChanged.

streaming — 6 knooppunten

Streamen

// updateData(nodes, edges) merges a batch into the graph — matching ids are
// updated, new ones added — in a single change event. Here a timer streams in one
// node + edge per tick, prunes the oldest to hold a window, and re-fits the camera
// so the moving graph stays framed. (Guarded by onUnmountedCallback in the page so
// it never outlives the graph.)
let timer = null
let seq = 5

function startStreaming(graph) {
    timer = setInterval(() => {
        const nodes = graph.getNodes()
        const recent = nodes.slice(-6)
        const parent = recent[Math.floor(Math.random() * recent.length)]
        const id = `evt-${++seq}`

        graph.updateData([{ id, data: { label: id } }], [{ from: parent.id, to: id }])

        // hold a rolling window: once past ~14 nodes, remove the oldest event
        const events = nodes.map((n) => n.id).filter((x) => x !== 'src')
        if (events.length > 13) graph.removeNode(events[0])

        // reheat so the newcomer and its neighbours settle into place, then re-fit
        graph.simulation.reheat(0.5)
        graph.renderer.fitAndCenter()
    }, 1400)
}

function stopStreaming() {
    if (timer) clearInterval(timer)
    timer = null
}

Reageer op veranderingen

// updateData (and add/removeNode) emit dataBatchChanged — the hook for keeping your
// own state, a persistence layer, or a live counter in sync. Returns an unsubscribe.
function onDataChange(graph, report) {
    const handler = () => report(graph.getNodes().length)
    graph.on('dataBatchChanged', handler)
    return () => graph.off('dataBatchChanged', handler)
}

Gegevens

// A seed graph the stream grows from.
const data = {
    nodes: [
        { id: 'src', data: { label: 'source' } },
        { id: 'evt-1', data: { label: 'evt-1' } },
        { id: 'evt-2', data: { label: 'evt-2' } },
        { id: 'evt-3', data: { label: 'evt-3' } },
        { id: 'evt-4', data: { label: 'evt-4' } },
        { id: 'evt-5', data: { label: 'evt-5' } }
    ],
    edges: [
        { from: 'src', to: 'evt-1' },
        { from: 'evt-1', to: 'evt-2' },
        { from: 'src', to: 'evt-3' },
        { from: 'evt-3', to: 'evt-4' },
        { from: 'evt-2', to: 'evt-5' }
    ]
}