クラスターと階層

ノード children を与えると、それは クラスター になります: 単一ノードに折りたたまれます混雑したグラフを整理するには、グラフを展開してバブル内に配置されたメンバーを表示します。アン折りたたまれたクラスター内に端があるエッジは、代わりにクラスターに描画されます。深さがあるため、トポロジは常に読み取り可能な状態に保たれます。これは、両端が非表示の場合でも当てはまります。 a3 → b1 2 つのグループ間のリンクは、画面上にあるノードを再ターゲットします — group-a → group-b 両方がボックスの場合、a3 → group-b グループ A が開くと、ボックスを折りたたんだからといって依存関係が消えることはありません。

クラスター上の + / − バッジをクリックして切り替えるか、次のようにコードから操作します。 graph.toggleExpandNode(node)。 グループ A が開き始め、リンクが表示されます。州を越えてターゲットを再設定する。 すべて折りたたむ を押して、グラフを 2 つのボックスに折りたたむクラスター間の矢印で結合されています。

展開/折りたたみオプションデータ

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

クラスターと階層 ​

クラスターと階層