シミュレーションオプション
Pivotick では、パフォーマンスと安定性を確保するために物理シミュレーションが部分的に管理されています。これには次のものが含まれます。
- 事前計算: グラフがレンダリングされる前にレイアウトがシミュレートされ、ほぼ安定した時点で停止します。
- 時間指定実行: 実行時間が長すぎる場合、シミュレーションは自動的に停止します。
- 開始/停止制御: エンジンは、シミュレーションがバックグラウンドで不必要に実行されるのを防ぎます。
この制御された動作のため、シミュレーションの終了後にノードを追加しても、物理演算が自動的に再実行されることはありません。 グラフを動的に変更する場合は、レイアウトを手動で「再加熱」して、新しいシミュレーション パスをトリガーする必要があります。
const graph = new Pivotick(container, data)
// Add nodes
graph.simulation.reheat(0.7) 自動レイアウト調整
デフォルトでは、Pivotick がレイアウトを調整します。 1 つの固定バンドルを適用するのではなく すべてのグラフに対する力の設定は、実際に画面上に表示されているものから導出されます。 ノードの数、ノードの大きさ、キャンバスの大きさ - そして 変更されるたびにそれらを再導出します。 4 つの小さなノードには呼吸する余地があります。 40 大きいものは触れずに近くに詰め込まれます。
これは 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) はそのグラフの自動をオフにするため、既存の 設定が静かに引き継がれることはありません。 physics: 'auto' 明示的なものと並べて オプションは依然として有効です。明示的な値は開始フレームをシードし、自動で取得されます。 そこから。
Auto では、Physics フライアウトが公開するのと同じノブとスライダーのみが動きます。 再調整に従うので、その決定は非表示ではなく表示されます。 スライダー、set* コール、またはタイト/ルーズ プリセットなど、ノブを自分で回すことができます。 それを永久に取り戻します。後で選択を再調整することはありません。
さらに 2 つの注意事項:
- Auto は強制レイアウトのみです。
tree/egoTreeの下では何も行われません。 間隔はレイアウト自身の仕事です。 - Auto は、一時停止された (またはスローティック ウォッチドッグが停止した) シミュレーションを再開しません。 オフになっています）。それはまだノブを解決します。ただ何も起きません。
ヒント
physics: 'manual' をピン留めすることは、スクリーンショットのテストとサムネイルの正しい呼び出しです。 グラフのサイズに関係なく、毎回同じ画像が必要な場合。
オプション
シミュレーション オプションは、グラフ シミュレーション エンジンのノードとエッジの物理およびレイアウト動作を制御します。
詳細については、D3-force 公式ドキュメント を確認してください。
| オプション | 種類 | デフォルト | 説明 |
|---|---|---|---|
userWorker | ブール値 | true | 初期ノード配置計算は Web ワーカーによって実行されるべきか |
enabled | ブール値 | true | シミュレーションが実行されているかどうか |
physics | 'auto' | 'manual' | 'auto'† | 誰が力の設定を決定するか — 自動レイアウト調整 を参照してください。 |
warmupTicks | 番号 | 'auto' | 'auto' | 最初のフレームの前に開始レイアウトが実行されるようにチェックマークを付けます。 0 は何も実行しないため、x/y が与えられたノードは元の場所で開き、グラフが変化するまでノードを移動せずに自動物理演算が再調整されます。 |
d3Alpha | 番号 | 1.0 | 初期シミュレーションのアルファ版 |
d3AlphaMin | 番号 | 0.001 | シミュレーションが停止する前の最小アルファ値。 |
d3VelocityDecay | 番号 | 0.4 | ノードの速度に適用される摩擦。 |
d3LinkDistance | 番号 | 30 | 接続されたノード間のデフォルトの距離。 |
freezeNodesOnDrag | ブール値 | true | ドラッグ操作から解放されたときにノードをフリーズするかどうか。 |
callbacks | SimulationCallbacks | undefined | シミュレーション イベントに応答するためのフック。 |
† 'auto' 自動ドライブのオプションが設定されていないグラフのみ。参照してください 自動レイアウト調整。
情報
d3AlphaDecay、d3ManyBodyStrength、d3CollideRadius などの他の D3 フォース パラメーターも利用でき、 API リファレンス に文書化されています。
コールバック
onInit(sim: Simulation): シミュレーションの初期化時に呼び出されます。onStart(sim: Simulation): シミュレーションの実行開始時に呼び出されます。onStop(sim: Simulation): シミュレーションが停止すると呼び出されます。onTick(sim: Simulation): シミュレーションのティックごとに呼び出されます。
API
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()