¿Es posible animar suavemente desde una posición renderizada en un nivel de zoom, a una posición renderizada en otro nivel de zoom, con todos los elementos del gráfico dentro de la ventana gráfica?
Aquí hay un jsbin que demuestra mi problema. Después de que se cargue el gráfico grande, haga clic en uno de los nodos y observe cómo se anima fuera de la pantalla y luego en la pantalla. (Necesitará que la ventana gráfica sea lo suficientemente estrecha).
https://jsbin.com/mimesam/9/edit?js,salida
¿Hay alguna forma de evitar esto? Realmente me gustaría que las animaciones de diseño funcionen de manera predeterminada para que el fit (zoom/panorámica) se tenga en cuenta durante la animación del diseño, de modo que las posiciones renderizadas ajustadas al diseño se animen sin problemas entre sí.
Descripción: comience con un gráfico de un par de cientos de elementos. Utilice un diseño para generar posiciones iniciales. Utilice una ventana gráfica que sea lo suficientemente pequeña como para que las posiciones del modelo sean demasiado grandes para la ventana gráfica, de modo que el fit provoque un zoom.
Luego elija un subconjunto del gráfico e invoque el mismo diseño de fit en ese subconjunto.
Idealmente, el subconjunto del gráfico debe animarse suavemente en una dirección, desde la posición original hasta la nueva posición.
En cambio, veo un comportamiento swoopy, donde los elementos se animan fuera de la ventana gráfica en su camino hacia las posiciones del modelo, antes de que el ajuste se active y se anime de nuevo a las posiciones renderizadas ampliadas.
Intenta hacer cosas paso a paso y animadas.
cy.animate({ fit: { eles: cy.$() }, duration: 500, complete: function () { setTimeout(function () { cy.layout({ name: 'breadthfirst', animationDuration: 2000, animate: true, fit: true, directed: true, }).run(); }, 500); }, });