集群和层次结构

给定一个节点children，它就会变成一个簇：将其折叠为单个节点以驯服繁忙的图，将其展开以显示其在气泡中布局的成员。相反，在折叠簇内部末端的边会在任意深度绘制到簇，因此拓扑始终保持可读。即使当 ** 两端都被隐藏时，这仍然成立：两个组之间的 a3 → b1 链接重新定位到屏幕上的任何节点 - 当两个都是盒子时，group-a → group-b，一旦 A 组打开，a3 → group-b - 因此依赖关系永远不会因为你折叠了一个盒子而消失。

单击集群上的 + / − 徽章进行切换，或使用 graph.toggleExpandNode(node) 从代码驱动它。 A 组 开始打开，以便您可以看到跨州的链接重新定位；点击 **全部折叠 ** 将图形向下折叠为由跨簇箭头连接的两个框。

展开/折叠选项数据

// 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)
    })
}

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

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

集群和层次结构 ​

集群和层次结构