跳转到内容
Pivotick
Main Navigation 首页
快速入门
配置
API 参考
示例库项目在线体验

简体中文

English
Français
Deutsch
Português

简体中文

English
Français
Deutsch
Português

外观

Sidebar Navigation

快速入门

使用 Pivotick 的项目

配置

回调

边图层

简化

布局

渲染

模拟

自定义界面

侧栏

提示框

上下文菜单

筛选

图例

数据表格

界面样式

翻译界面

插件

Pivotick API

拓展与数据增强

保存拓展结果

撤销与历史记录

安全

API 文档

示例库

基础

节点样式

边样式

布局

事件与回调

界面自定义

编辑与创建

备注与注释

筛选、搜索与层级

编程控制

主题与性能

拓展与数据增强

综合示例

多选和批量操作 ​

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' } }
    ]
}
Pager
下一页快速入门