多选和批量操作
Select several nodes and Pivotick surfaces a bulk-action row at the top of the sidebar — Pin, Unpin, Hide and Delete act on一次完成整个选择(隔离、分组、取消分组和批量编辑即将推出)。清除✕可重置选择。
建立一个选择:
Shift+Click— 将节点添加到选择中Alt+Click— 开始新的选择Ctrl+Click— 从选择中删除节点- 或在空白画布上拖动一个框
选择两个或多个节点后,将出现批量行。要对代码中的选择做出反应,请使用 onNodesSelect 回调 - 下面的通知由它驱动。
js
// 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)
}
}
}js
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' } }
]
}