複数選択と一括アクション

複数のノードを選択し、Pivotick を選択すると、ノードの上部に 一括アクション行 が表示されます。サイドバー — 固定、固定解除、非表示、削除は選択範囲全体に作用します。 1 回 (分離、グループ化、グループ解除、および一括編集は近日中に提供される予定です)。 ✕ をクリアすると、選択。

選択範囲を構築します。

Shift + Click — 選択範囲にノードを追加します
Alt + Click — 新しい選択を開始します
Ctrl + Click — 選択からノードを削除します
または、空のキャンバス上でボックスをドラッグ

2 つ以上のノードを選択すると、一括行が表示されます。での選択に反応するにはコードでは、onNodesSelect コールバックを使用します。以下の通知はそれによって駆動されます。

オプションデータ

// Multi-selection is built in — pick several nodes and the sidebar shows a bulk-action
// row (Pin / Unpin / Hide / Delete) that acts on the whole selection. `mode: 'full'`
// is what renders the sidebar (and therefore the bulk row).
//
// To react programmatically, use the `onNodesSelect` callback. Its argument only
// carries the nodes involved in *this* change, so read the authoritative current
// selection from the interaction layer instead:
const options = {
    UI: {
        mode: 'full',
        // Off: `full` mode brings a minimap and the data dock, and this card is about
        // neither (see the Minimap and Data table cards for those).
        minimap: false,
        table: false,
        // Keep the sidebar open so the bulk-action row is visible (the embed is
        // short enough that 'auto' would otherwise collapse it).
        sidebar: { collapsed: false }
    },
    callbacks: {
        onNodesSelect: () => {
            const selected = graph.renderer.getGraphInteraction().getSelectedNodes()
            if (selected.length < 2) return
            const labels = selected.map((s) => s.node.getData().label).join(', ')
            graph.notifier.info(`${selected.length} nodes selected`, labels)
        }
    }
}

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice', role: 'Maintainer', team: 'Core', commits: 342 } },
        { id: 'bob', data: { label: 'Bob', role: 'Contributor', team: 'Core', commits: 87 } },
        { id: 'carol', data: { label: 'Carol', role: 'Reviewer', team: 'Docs', commits: 45 } },
        { id: 'dave', data: { label: 'Dave', role: 'Contributor', team: 'Docs', commits: 63 } },
        { id: 'erin', data: { label: 'Erin', role: 'Maintainer', team: 'Infra', commits: 210 } }
    ],
    edges: [
        { from: 'alice', to: 'bob', data: { label: 'mentors' } },
        { from: 'alice', to: 'carol', data: { label: 'reviews' } },
        { from: 'carol', to: 'dave', data: { label: 'pairs' } },
        { from: 'erin', to: 'alice', data: { label: 'syncs' } }
    ]
}

複数選択と一括アクション ​

複数選択と一括アクション