Así que estoy usando d3.zoom y definiendo el método on y aplicando la transformación manualmente a diferentes elementos. Pero cuando se produce otra panorámica/zoom, se produce la transformación del estado original al estado actual. Quiero que me dé solo del último estado al estado actual.
Por ejemplo: primero hago zoom en la vista que me da una transformación similar a esta: {x=0,y=0,k=2} . La próxima vez, si muevo la vista hacia la derecha, el objeto de transform en el event es {x=2,y=0,k=2} . Pero quiero que me dé {x=2,y=0,k=1} . Entonces, de alguna manera necesito restablecer el zoom a d3.zoomIdentity sin cambiar la transformación del elemento. ¿Cómo hago esto?
A continuación se muestra un fragmento de código que explica lo que quiero:
d3.zoom().on("zoom", event => { console.log(event.transform); // {x=1, y=5, k=0.5} recalculateVertices(event.transform); recalculateEdges(event.transform); // Now I want to reset the transform of zoom to {x=0,y=0,k=1} // Something like this resetZoom(zoom); // So the next time again a zoom event occurs, it will give the // event.transform as the transformation only from current state to that next state. // Instead of "from original state to current state". })Puede llamar a selection.call(zoom.transform, zoomIdentity) al final de la devolución de llamada de zoom. Para evitar la repetición infinita, puede omitir la devolución de llamada si la transformación de zoom es la identidad:
d3.zoom().on("zoom", event => { // Do nothing if the transform is the zoom identity. This avoids // infinite recursion with the last line of this callback if(event.transform.toString() === zoomIdentity.toString()) { return } console.log(event.transform); // {x=1, y=5, k=0.5} recalculateVertices(event.transform); recalculateEdges(event.transform); // "selection" is the d3 selection that calls zoom // "zoom" is the zoom behavior that gets called in the selection // "zoomIdentity" is the identity transform {x: 0, y: 0, k: 1} // that is imported from d3 selection.call(zoom.transform, zoomIdentity) // To avoid recursion (because the method above will trigger this callback // again), the callback starts with a condition to do nothing when the zoom is // the identity transform })Es posible que deba reordenar un poco el código para hacer referencia al zoom y la selección en la devolución de llamada:
const zoom = d3.zoom(); const selection = ...; zoom.on('zoom', ...); selection.call(zoom);