跳转到内容

模拟选项 ​

在 Pivotick 中,为了性能和稳定性对物理模拟进行了部分管理。它包括:

  • 预计算:在图形渲染之前模拟布局,当接近稳定时停止。
  • 定时执行:如果运行时间过长,模拟会自动停止。
  • 启动/停止控制:引擎防止模拟在后台不必要地运行。

由于这种受控行为,模拟完成后添加节点不会自动重新运行物理。如果动态修改图形,则需要手动“重新加热”布局以触发新的模拟通道。

ts
const graph = new Pivotick(container, data)
// Add nodes
graph.simulation.reheat(0.7) 

自动布局调整 ​

默认情况下,Pivotick会为您调整布局。它不是对每个图形应用一组固定的力设置,而是从屏幕上实际显示的内容(有多少个节点、它们有多大以及画布有多大)派生它们,并在发生变化时重新派生它们。四个小节点有呼吸的空间;四十个大的人挤得更近,但没有接触。

这是 Auto 预设,除非您另有说明,否则它会打开:

ts
// 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节点从拖动操作释放后是否被冻结。
callbacksSimulationCallbacksundefined用于响应模拟事件的挂钩。

† 'auto' 仅适用于未配置任何自动驱动选项的图表;请参阅自动布局调整。

信息

其他 D3 力参数(如 d3AlphaDecay、d3ManyBodyStrength、d3CollideRadius)可用,并且记录在 API 参考中。

回调 ​

  • onInit(sim: Simulation):模拟初始化时调用。
  • onStart(sim: Simulation):模拟开始运行时调用。
  • onStop(sim: Simulation):模拟停止时调用。
  • onTick(sim: Simulation):在每个模拟刻度时调用。

应用程序编程接口 ​

Pivotick 公开了一个模拟控制器,可让您直接与物理引擎交互。所有方法网上均可

停止/启动 ​

ts
pause(): void;
reheat(alpha?: number): void;
restart(): void;
start(): Promise<void>;
stop(): void;

改变布局 ​

ts
changeLayout(
    type: LayoutType,
    simulationOptions?: DeepPartial<SimulationOptions.SimulationOptions>,
): Promise<void>;
ts
graph.simulation.changeLayout('tree', {
    layout: {
         horizontal: false,
         rootIdAlgorithmFinder: 'FirstZeroInDegree'
    }
})

稳定回调 ​

ts
waitForSimulationStop(): Promise<void>;
ts
graph.simulation.reheat(0.7)
// Wait until the simulation stops
await graph.simulation.waitForSimulationStop()
graph.renderer.fitAndCenter()