模拟选项
在 Pivotick 中,为了性能和稳定性对物理模拟进行了部分管理。它包括:
- 预计算:在图形渲染之前模拟布局,当接近稳定时停止。
- 定时执行:如果运行时间过长,模拟会自动停止。
- 启动/停止控制:引擎防止模拟在后台不必要地运行。
由于这种受控行为,模拟完成后添加节点不会自动重新运行物理。如果动态修改图形,则需要手动“重新加热”布局以触发新的模拟通道。
const graph = new Pivotick(container, data)
// Add nodes
graph.simulation.reheat(0.7) 自动布局调整
默认情况下,Pivotick会为您调整布局。它不是对每个图形应用一组固定的力设置,而是从屏幕上实际显示的内容(有多少个节点、它们有多大以及画布有多大)派生它们,并在发生变化时重新派生它们。四个小节点有呼吸的空间;四十个大的人挤得更近,但没有接触。
这是 Auto 预设,除非您另有说明,否则它会打开:
// Auto: no physics configured, so Pivotick tunes the layout as the graph changes.
new Pivotick(container, data)
// Manual: you set a physics option, so your value is kept and nothing re-tunes.
new Pivotick(container, data, { simulation: { d3LinkDistance: 200 } })
// Explicit, either way.
new Pivotick(container, data, { simulation: { physics: 'manual' } })
new Pivotick(container, data, { simulation: { physics: 'auto', d3LinkDistance: 200 } })该规则故意保守:设置自动驱动(d3LinkDistance、d3ManyBodyStrength、d3CollideRadiusMultiplier、d3VelocityDecay、d3GravityStrength、d3GravityStrengthConnected、d3AlphaDecay、cooldownTime)的any选项会关闭该图的自动功能,因此现有配置永远不会被悄悄接管。 physics: 'auto' 与显式选项一起仍然是合法的 - 显式值在开始框架中播种,自动从那里接管。
自动仅移动物理弹出按钮暴露的相同旋钮,并且滑块在重新调整时跟随,因此它的决定是可见的而不是隐藏的。自己转动任何旋钮 - 滑块、set* 调用或紧/松预设 - 都会将其永久恢复;之后没有什么会重新调整你的选择。
另外两个注意事项:
- Auto 仅是强制布局。在
tree/egoTree下它什么也不做,因为树间距是布局自己的事情。 - Auto 永远不会重新启动暂停的模拟(或慢速滴答看门狗关闭的模拟)。它仍然可以调节旋钮;它只是没有唤醒任何东西。
小费
固定 physics: 'manual' 是屏幕截图测试和缩略图的正确调用,无论图形大小如何,您每次都希望使用相同的图片。
选项
模拟选项控制图形模拟引擎的节点和边的物理和布局行为。
查看D3-force官方文档了解更多信息。
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
userWorker | 布尔值 | true | 初始节点放置计算是否应由网络工作人员完成 |
enabled | 布尔值 | true | 模拟是否正在运行 |
physics | 'auto' | 'manual' | 'auto'† | 谁驱动力设置 - 请参阅自动布局调整。 |
warmupTicks | 数量 | 'auto' | 'auto' | 勾选在第一帧之前运行的开始布局。 0 不运行任何内容,因此给定 x/y 的节点会在原来的位置打开,并且自动物理会重新调整而不移动它们,直到图形发生变化。 |
d3Alpha | 数量 | 1.0 | 初始模拟阿尔法 |
d3AlphaMin | 数量 | 0.001 | 模拟停止前的最小 alpha 值。 |
d3VelocityDecay | 数量 | 0.4 | 应用于节点速度的摩擦力。 |
d3LinkDistance | 数量 | 30 | 连接节点之间的默认距离。 |
freezeNodesOnDrag | 布尔值 | true | 节点从拖动操作释放后是否被冻结。 |
callbacks | SimulationCallbacks | undefined | 用于响应模拟事件的挂钩。 |
† 'auto' 仅适用于未配置任何自动驱动选项的图表;请参阅自动布局调整。
信息
其他 D3 力参数(如 d3AlphaDecay、d3ManyBodyStrength、d3CollideRadius)可用,并且记录在 API 参考中。
回调
onInit(sim: Simulation):模拟初始化时调用。onStart(sim: Simulation):模拟开始运行时调用。onStop(sim: Simulation):模拟停止时调用。onTick(sim: Simulation):在每个模拟刻度时调用。
应用程序编程接口
Pivotick 公开了一个模拟控制器,可让您直接与物理引擎交互。所有方法网上均可
停止/启动
pause(): void;
reheat(alpha?: number): void;
restart(): void;
start(): Promise<void>;
stop(): void;改变布局
changeLayout(
type: LayoutType,
simulationOptions?: DeepPartial<SimulationOptions.SimulationOptions>,
): Promise<void>;graph.simulation.changeLayout('tree', {
layout: {
horizontal: false,
rootIdAlgorithmFinder: 'FirstZeroInDegree'
}
})稳定回调
waitForSimulationStop(): Promise<void>;graph.simulation.reheat(0.7)
// Wait until the simulation stops
await graph.simulation.waitForSimulationStop()
graph.renderer.fitAndCenter()