Simulationsoptionen

In Pivotick wird die Physiksimulation teilweise hinsichtlich Leistung und Stabilität verwaltet. Es beinhaltet:

• Vorberechnung: Das Layout wird simuliert, bevor das Diagramm gerendert wird, und stoppt, sobald es nahezu stabil ist.
• Zeitgesteuerte Ausführung: Die Simulation stoppt automatisch, wenn sie zu lange läuft.
• Start-/Stopp-Steuerung: Der Motor verhindert, dass die Simulation unnötig im Hintergrund läuft.

Aufgrund dieses kontrollierten Verhaltens wird die Physik beim Hinzufügen von Knoten nach Abschluss der Simulation nicht automatisch erneut ausgeführt. Wenn Sie das Diagramm dynamisch ändern, müssen Sie das Layout manuell „erneut erwärmen“, um einen neuen Simulationsdurchlauf auszulösen.

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

Automatische Layout-Optimierung

Standardmäßig passt Pivotick das Layout für Sie an. Anstatt ein festes Bündel von Krafteinstellungen auf jedes Diagramm anzuwenden, werden diese von dem abgeleitet, was tatsächlich auf dem Bildschirm angezeigt wird – wie viele Knoten es gibt, wie groß sie sind und wie groß die Arbeitsfläche ist – und werden bei jeder Änderung neu abgeleitet. Vier kleine Knoten bekommen Raum zum Atmen; Vierzig große werden dichter zusammengedrängt, ohne sich zu berühren.

Dies ist die Voreinstellung Auto und sie ist aktiviert, sofern Sie nichts anderes angeben:

// 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 } })

Die Regel ist bewusst konservativ: Wenn Sie die Option any festlegen, die automatisch fährt (d3LinkDistance, d3ManyBodyStrength, d3CollideRadiusMultiplier, d3VelocityDecay, d3GravityStrength, d3GravityStrengthConnected, d3AlphaDecay, cooldownTime), wird Auto für dieses Diagramm ausgeschaltet, sodass eine vorhandene Konfiguration niemals stillschweigend übernommen wird vorbei. physics: 'auto' neben expliziten Optionen ist immer noch zulässig – die expliziten Werte setzen den Startrahmen und von dort aus übernimmt Auto.

„Auto“ bewegt immer nur die gleichen Regler, die im Flyout „Physik“ angezeigt werden, und die Schieberegler folgen der Neueinstellung, sodass die Entscheidungen sichtbar und nicht verborgen sind. Wenn Sie selbst einen beliebigen Knopf drehen – einen Schieberegler, einen set*-Aufruf oder die Tight/Loose-Voreinstellungen –, wird er endgültig zurückgesetzt; Nichts wird Ihre Wahl im Nachhinein mehr beeinträchtigen.

Noch zwei Anmerkungen:

• „Auto“ ist nur für erzwungenes Layout vorgesehen. Unter tree / egoTree passiert nichts, da der Baumabstand Sache des Layouts ist.
• „Auto“ startet niemals eine Simulation neu, die angehalten ist (oder bei der der Slow-Tick-Watchdog ausgeschaltet ist). Es funktioniert immer noch mit den Knöpfen; es weckt einfach nichts auf.

Tipp

Das Anheften physics: 'manual' ist der richtige Aufruf für Screenshot-Tests und Miniaturansichten, bei denen Sie unabhängig von der Diagrammgröße jedes Mal das gleiche Bild haben möchten.

Optionen

Die Simulationsoptionen steuern die Physik und das Layoutverhalten von Knoten und Kanten für die Graphsimulations-Engine.

ÜberprüfenOffizielle Dokumentation von D3-forceum mehr zu erfahren.

Option	Typ	Standardwert	Beschreibung
userWorker	Boolescher Wert	true	Sollte die anfängliche Berechnung der Knotenplatzierung von einem Web-Worker durchgeführt werden?
enabled	Boolescher Wert	true	Sollte die Simulation laufen?
physics	'auto' | 'manual'	'auto'†	Wer steuert die Force-Einstellungen – siehe Automatische Layout-Optimierung.
warmupTicks	Zahl | 'auto'	'auto'	Markiert, dass das Eröffnungslayout vor dem ersten Frame ausgeführt wird. 0 führt keine aus, sodass Knoten mit einem x/y dort geöffnet werden, wo sie waren, und die automatische Physik wird neu abgestimmt, ohne sie zu bewegen, bis sich das Diagramm ändert.
d3Alpha	Nummer	1.0	Erstes Simulations-Alpha
d3AlphaMin	Nummer	0.001	Minimaler Alphawert, bevor die Simulation stoppt.
d3VelocityDecay	Nummer	0.4	Auf Knotengeschwindigkeiten angewendete Reibung.
d3LinkDistance	Nummer	30	Standardabstand zwischen verbundenen Knoten.
freezeNodesOnDrag	Boolescher Wert	true	Ob Knoten eingefroren werden, sobald sie von einem Ziehvorgang freigegeben werden.
callbacks	SimulationCallbacks	undefined	Hooks zum Reagieren auf Simulationsereignisse.

† 'auto' nur für Diagramme, die keine der Optionen Automatische Laufwerke konfigurieren; siehe Automatische Layout-Optimierung.

Infos

Andere D3-Force-Parameter wie d3AlphaDecay, d3ManyBodyStrength, d3CollideRadius sind verfügbar und in der API-Referenzdokumentiert.

Rückrufe

• onInit(sim: Simulation): Wird aufgerufen, wenn die Simulation initialisiert wird.
• onStart(sim: Simulation): Wird aufgerufen, wenn die Simulation beginnt.
• onStop(sim: Simulation): Wird aufgerufen, wenn die Simulation stoppt.
• onTick(sim: Simulation): Wird bei jedem Simulationstick aufgerufen.

API

Pivotick stellt einen Simulationscontroller bereit, mit dem Sie direkt mit der Physik-Engine interagieren können. Alle Methoden sind online verfügbar

Stopp/Start

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

Layout ändern

changeLayout method

changeLayout(
    type: LayoutType,
    simulationOptions?: DeepPartial<SimulationOptions.SimulationOptions>,
): Promise<void>;

Change layour to a tree

graph.simulation.changeLayout('tree', {
    layout: {
         horizontal: false,
         rootIdAlgorithmFinder: 'FirstZeroInDegree'
    }
})

Stabilisierungsrückruf

waitForSimulationStop method

waitForSimulationStop(): Promise<void>;

Change layour to a tree

graph.simulation.reheat(0.7)
// Wait until the simulation stops
await graph.simulation.waitForSimulationStop()
graph.renderer.fitAndCenter()