数据事件总线

与交互回调分开，该图针对更改的所有内容发出类型化数据事件总线 - nodeAdd、nodeRemove、edgeAdd、edgeRemove、nodeChange、dataBatchChanged等。使用graph.on(event, fn)订阅并使用graph.off(event, fn)退订。这是用于持久化、撤消或将图表同步到后端的接缝。

按钮会改变图表；日志显示响应时触发的事件 - 包括删除节点也会删除其边缘的级联。

添加或删除节点以触发事件...

活动巴士

// The data event bus fires whenever the graph's data changes — whether the
// change came from your code, the built-in UI, or the editing tools. Subscribe
// with graph.on(...); the returned function tears the listeners back down with
// graph.off(...).
function registerEvents(graph, onEvent) {
    const onNodeAdd = (node) => onEvent('nodeAdd', node.id)
    const onNodeRemove = (node) => onEvent('nodeRemove', node.id)
    const onEdgeAdd = (edge) => onEvent('edgeAdd', edge.id)
    const onEdgeRemove = (edge) => onEvent('edgeRemove', edge.id)
    const onBatch = (changes) => onEvent('dataBatchChanged', `${changes.length} change(s)`)

    graph.on('nodeAdd', onNodeAdd)
    graph.on('nodeRemove', onNodeRemove)
    graph.on('edgeAdd', onEdgeAdd)
    graph.on('edgeRemove', onEdgeRemove)
    graph.on('dataBatchChanged', onBatch)

    return () => {
        graph.off('nodeAdd', onNodeAdd)
        graph.off('nodeRemove', onNodeRemove)
        graph.off('edgeAdd', onEdgeAdd)
        graph.off('edgeRemove', onEdgeRemove)
        graph.off('dataBatchChanged', onBatch)
    }
}

突变

let seq = 0
const added = []

// Adding a node + its edge fires nodeAdd, edgeAdd and dataBatchChanged.
function addNode(graph) {
    const id = `node-${++seq}`
    graph.addNode({ id })
    graph.addEdge({ from: 'hub', to: id })
    added.push(id)
    graph.simulation.reheat(0.6)
}

// Removing a node also removes its connected edge — so a single call fires
// nodeRemove *and* edgeRemove.
function removeNode(graph) {
    const id = added.pop()
    if (id) {
        graph.removeNode(id)
        graph.simulation.reheat(0.4)
    }
}

数据

const data = {
    nodes: [
        { id: 'hub' },
        { id: 'a' },
        { id: 'b' },
        { id: 'c' }
    ],
    edges: [
        { from: 'hub', to: 'a' },
        { from: 'hub', to: 'b' },
        { from: 'hub', to: 'c' }
    ]
}