Clústeres y jerarquía

Dé un nodo children y se convierte en un clúster: contraigalo en un solo nodo para domesticar un gráfico ocupado, amplíelo para revelar sus miembros dispuestos en una burbuja. un El borde con un extremo dentro de un grupo colapsado se dibuja en el grupo en su lugar, en cualquier profundidad, por lo que la topología siempre permanece legible. Eso es válido incluso cuando ambos están ocultos: el a3 → b1 el enlace entre los dos grupos redirige a los nodos que estén en la pantalla: group-a → group-b cuando ambas son casillas, a3 → group-b una vez que se abre el Grupo A, entonces el La dependencia nunca desaparece sólo porque colapsaste una caja.

Haga clic en la insignia + / − en un grupo para alternarlo o controlarlo desde el código con graph.toggleExpandNode(node). Grupo A comienza a abrirse para que puedas ver el enlace reorientar la atención en todos los estados; presione contraer todo para plegar el gráfico en dos cuadros unidos por esa flecha cruzada.

Expandir/contraer

// The same toggle programmatically: fetch the cluster node and hand it to
// toggleExpandNode. node.expanded tells you the current state.
function toggleCluster(graph, id) {
    const node = graph.getMutableNode(id)
    if (node) graph.toggleExpandNode(node)
}

function setAllExpanded(graph, expanded) {
    const clusters = ['group-a', 'group-b']
    clusters.forEach((id) => {
        const node = graph.getMutableNode(id)
        if (node && !!node.expanded !== expanded) graph.toggleExpandNode(node)
    })
}

Opciones

// enableNodeExpansion (on by default) draws the +/- affordance on clusters and
// makes them clickable. A collapsed cluster shows one node with synthetic edges to
// it; expanding lays its members out in a bubble and reveals their real edges.
const options = {
    render: { enableNodeExpansion: true }
}

Datos

// A node becomes a cluster by giving it `children` — full nodes in their own
// right. `expanded: false` starts it collapsed (rendered as a single node); the
// members and their edges appear when it opens. Edges are always declared at the
// top level, whether they cross clusters or stay inside one.
const data = {
    nodes: [
        { id: 'core', data: { label: 'core' } },
        {
            id: 'group-a',
            data: { label: 'Group A' },
            expanded: false,
            children: [
                { id: 'a1', data: { label: 'a1' } },
                { id: 'a2', data: { label: 'a2' } },
                { id: 'a3', data: { label: 'a3' } }
            ]
        },
        {
            id: 'group-b',
            data: { label: 'Group B' },
            expanded: false,
            children: [
                { id: 'b1', data: { label: 'b1' } },
                { id: 'b2', data: { label: 'b2' } },
                { id: 'b3', data: { label: 'b3' } }
            ]
        }
    ],
    edges: [
        { from: 'core', to: 'a1' },
        { from: 'a1', to: 'a2' },
        { from: 'a2', to: 'a3' },
        { from: 'core', to: 'b1' },
        { from: 'b1', to: 'b2' },
        { from: 'b2', to: 'b3' },
        // Crosses two cluster boundaries: re-targets to whatever's on screen
        // (group-a → group-b collapsed, a3 → group-b once A opens, and so on).
        { from: 'a3', to: 'b1' }
    ]
}