So I am using the d3.zoom and defining the on method and applying the transform manually to different elements. But when another panning/zooming occurs, it gives the transformation from the original state to current state. I want it to give me only from the last state to current state.
For example: first I zoom into the view which gives me a transformation something like this: {x=0,y=0,k=2}. Next time, if I pan the view to right, the transform object in the event is {x=2,y=0,k=2}. But I want it to give me {x=2,y=0,k=1}. So I need to somehow reset the zoom to d3.zoomIdentity without changing the element transformation. How do I do this?
Below is a code snippet explaining what I want:
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".
})
You can call selection.call(zoom.transform, zoomIdentity) at the end of the on zoom callback. To avoid infinite recursion, you can skip the callback if the zoom transform is the identity:
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
})
You might need to reorder the code a bit to reference the zoom and the selection on the callback:
const zoom = d3.zoom();
const selection = ...;
zoom.on('zoom', ...);
selection.call(zoom);