Options de simulation
Dans Pivotick, la simulation physique est partiellement gérée pour les performances et la stabilité. Il comprend :
- Pré-calcul : la mise en page est simulée avant le rendu du graphique, s'arrêtant une fois qu'il est presque stable.
- Exécution chronométrée : la simulation s'arrête automatiquement si elle dure trop longtemps.
- Contrôle démarrage/arrêt : le moteur empêche la simulation de fonctionner inutilement en arrière-plan.
En raison de ce comportement contrôlé, l'ajout de nœuds une fois la simulation terminée ne réexécutera pas automatiquement la physique. Si vous modifiez le graphique de manière dynamique, vous devrez « réchauffer » manuellement la mise en page pour déclencher une nouvelle passe de simulation.
const graph = new Pivotick(container, data)
// Add nodes
graph.simulation.reheat(0.7) Réglage automatique de la mise en page
Par défaut, Pivotick ajuste la mise en page pour vous. Plutôt que d'appliquer un ensemble fixe de paramètres de force à chaque graphique, il les dérive de ce qui est réellement à l'écran (nombre de nœuds, quelle est leur taille et la taille du canevas) et les redirige chaque fois que cela change. Quatre petits nœuds ont de la place pour respirer ; quarante gros se rapprochent sans se toucher.
Il s'agit du préréglage Auto, et il est activé sauf indication contraire :
// 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 } })La règle est délibérément conservatrice : définir l'option any que les lecteurs automatiques (d3LinkDistance, d3ManyBodyStrength, d3CollideRadiusMultiplier, d3VelocityDecay, d3GravityStrength, d3GravityStrengthConnected, d3AlphaDecay, cooldownTime) désactive automatiquement ce graphique, de sorte qu'une configuration existante n'est jamais prise en silence. fini. physics: 'auto' aux côtés des options explicites est toujours légal — les valeurs explicites amorcent le cadre d'ouverture et Auto prend le relais à partir de là.
Auto ne déplace que les mêmes boutons que ceux exposés par le menu déroulant Physique, et les curseurs suivent lors du réajustement, de sorte que ses décisions sont visibles plutôt que masquées. Tourner n'importe quel bouton vous-même - un curseur, un appel set* ou les préréglages Tight/Loose - le reprend pour de bon ; rien ne modifiera votre choix par la suite.
Deux autres remarques :
- Auto est uniquement une mise en page forcée. Sous
tree/egoTreecela ne fait rien, car l'espacement des arbres est l'affaire de la mise en page. - Auto ne redémarre jamais une simulation qui est en pause (ou dont le chien de garde lent est désactivé). Cela fonctionne toujours avec les boutons ; ça ne réveille rien.
conseil
Épingler physics: 'manual' est la bonne solution pour les tests de capture d'écran et les vignettes, où vous voulez la même image à chaque fois, quelle que soit la taille du graphique.
Options
Les options Simulation contrôlent la physique et le comportement de disposition des nœuds et des arêtes pour le moteur de simulation graphique.
Consultez la Documentation officielle de D3-force pour en savoir plus.
| Options | Type | Valeur par défaut | Description |
|---|---|---|---|
userWorker | booléen | true | Le calcul initial du placement des nœuds doit-il être effectué par un travailleur Web |
enabled | booléen | true | Should the simulation be running |
physics | 'auto' | 'manual' | 'auto'† | Qui détermine les paramètres de force ? Voir Réglage automatique de la disposition. |
warmupTicks | numéro | 'auto' | 'auto' | Coche la mise en page d'ouverture qui s'exécute avant la première image. 0 n'en exécute aucun, donc les nœuds recevant un x/y s'ouvrent là où ils se trouvaient, et la physique automatique se réajuste sans les déplacer jusqu'à ce que le graphique change. |
d3Alpha | numéro | 1.0 | Alpha de simulation initiale |
d3AlphaMin | numéro | 0.001 | Minimum alpha value before the simulation stops. |
d3VelocityDecay | numéro | 0.4 | Friction applied to node velocities. |
d3LinkDistance | numéro | 30 | Default distance between connected nodes. |
freezeNodesOnDrag | booléen | true | Indique si les nœuds sont gelés une fois qu'ils sont libérés d'une opération de glissement. |
callbacks | SimulationCallbacks | undefined | Hooks pour répondre aux événements de simulation. |
† 'auto' uniquement pour les graphiques qui ne configurent aucune des options Conduites automatiques ; voir Réglage automatique de la mise en page.
infos
D'autres paramètres de force D3 comme d3AlphaDecay, d3ManyBodyStrength, d3CollideRadius sont disponibles et documentés dans la référence API.
Rappels
onInit(sim: Simulation): Called when the simulation initializes.onStart(sim: Simulation): Appelé lorsque la simulation démarre.onStop(sim: Simulation): Called when the simulation stops.onTick(sim: Simulation): Called on each simulation tick.
API
Pivotick expose un contrôleur de simulation qui vous permet d'interagir directement avec le moteur physique. Toutes les méthodes sont disponibles en ligne
Arrêter/Démarrer
pause(): void;
reheat(alpha?: number): void;
restart(): void;
start(): Promise<void>;
stop(): void;Changer la mise en page
changeLayout(
type: LayoutType,
simulationOptions?: DeepPartial<SimulationOptions.SimulationOptions>,
): Promise<void>;graph.simulation.changeLayout('tree', {
layout: {
horizontal: false,
rootIdAlgorithmFinder: 'FirstZeroInDegree'
}
})Rappel de stabilisation
waitForSimulationStop(): Promise<void>;graph.simulation.reheat(0.7)
// Wait until the simulation stops
await graph.simulation.waitForSimulationStop()
graph.renderer.fitAndCenter()