Ir al contenido

Opciones de simulación ​

En Pivotick, la simulación física se gestiona parcialmente en términos de rendimiento y estabilidad. Incluye:

  • Precálculo: el diseño se simula antes de representar el gráfico y se detiene una vez que está casi estable.
  • Ejecución programada: la simulación se detiene automáticamente si se ejecuta demasiado tiempo.
  • Control de arranque/parada: el motor evita que la simulación se ejecute innecesariamente en segundo plano.

Debido a este comportamiento controlado, agregar nodos una vez finalizada la simulación no volverá a ejecutar la física automáticamente. Si modifica el gráfico dinámicamente, deberá "recalentar" manualmente el diseño para activar una nueva pasada de simulación.

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

Ajuste automático del diseño ​

De forma predeterminada, Pivotick ajusta el diseño por usted. En lugar de aplicar un paquete fijo de ajustes de fuerza para cada gráfico, los deriva de lo que realmente está en la pantalla: cuántos nodos hay, qué tan grandes son y qué tan grande es el lienzo, y los vuelve a derivar cada vez que eso cambia. Cuatro pequeños ganglios obtienen espacio para respirar; cuarenta los grandes se acercan más sin tocarse.

Este es el valor preestablecido Auto y está activado a menos que indiques lo contrario:

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

La regla es deliberadamente conservadora: establecer cualquier opción que conduzca automáticamente (d3LinkDistance, d3ManyBodyStrength, d3CollideRadiusMultiplier, d3VelocityDecay, d3GravityStrength, d3GravityStrengthConnected, d3AlphaDecay, cooldownTime) desactiva Auto para ese gráfico, por lo que un existente la configuración nunca se toma silenciosamente. physics: 'auto' junto con explícito Las opciones siguen siendo legales: los valores explícitos generan el cuadro de apertura y Auto toma desde allí.

Auto solo mueve las mismas perillas que expone el menú lateral Física, y los controles deslizantes Sígalo mientras se vuelve a sintonizar, para que sus decisiones sean visibles en lugar de ocultas. Al girar cualquier perilla usted mismo (un control deslizante, una llamada set* o los ajustes preestablecidos Tight/Loose) lo retira para siempre; Nada volverá a sintonizar tu elección después.

Dos notas más:

  • Auto solo fuerza el diseño. Bajo tree / egoTree no hace nada, porque el árbol el espaciado es asunto propio del diseño.
  • Auto nunca reinicia una simulación que está en pausa (o que el perro guardián de tic lento apagado). Todavía funciona con las perillas; simplemente no despierta nada.

Consejo

Fijar physics: 'manual' es la opción correcta para pruebas de captura de pantalla y miniaturas. donde desea obtener la misma imagen siempre, independientemente del tamaño del gráfico.

Opciones ​

Las opciones de Simulación controlan la física y el comportamiento de diseño de nodos y bordes para el motor de simulación de gráficos.

Consulte la Documentación oficial de D3-force para obtener más información.

OpciónTipoPredeterminadoDescripción
userWorkerbooleanotrue¿El cálculo inicial de la ubicación del nodo debe ser realizado por un trabajador web?
enabledbooleanotrue¿Debería estar ejecutándose la simulación?
physics'auto' | 'manual''auto'†¿Quién controla la configuración de fuerza? Consulte Ajuste automático del diseño.
warmupTicksnúmero | 'auto''auto'Marca el diseño de apertura antes del primer fotograma. 0 no ejecuta ninguno, por lo que los nodos a los que se les da un x/y se abren donde estaban y la física automática se vuelve a sintonizar sin moverlos hasta que el gráfico cambie.
d3Alphanumero1.0Simulación inicial alfa
d3AlphaMinnumero0.001Valor alfa mínimo antes de que se detenga la simulación.
d3VelocityDecaynumero0.4Fricción aplicada a las velocidades de los nodos.
d3LinkDistancenumero30Distancia predeterminada entre nodos conectados.
freezeNodesOnDragbooleanotrueSi los nodos se congelan una vez que se liberan de una operación de arrastre.
callbacksSimulationCallbacksundefinedGanchos para responder a eventos de simulación.

† 'auto' solo para gráficas que no configuran ninguna de las opciones Unidades automáticas; ver Ajuste automático del diseño.

información

Otros parámetros de fuerza D3 como d3AlphaDecay, d3ManyBodyStrength, d3CollideRadius están disponibles y documentados en la referencia API.

Devoluciones de llamada ​

  • onInit(sim: Simulation): Se llama cuando se inicializa la simulación.
  • onStart(sim: Simulation): Se llama cuando la simulación comienza a ejecutarse.
  • onStop(sim: Simulation): Se llama cuando se detiene la simulación.
  • onTick(sim: Simulation): Se llama en cada tick de simulación.

API ​

Pivotick expone un controlador de simulación que te permite interactuar directamente con el motor de física. Todos los métodos están disponibles en línea

Detener / Iniciar ​

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

Cambiando el diseño ​

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

Devolución de llamada de estabilización ​

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