I would like to use a transition on all of my elements while zooming, but not while panning.
OPTION 1: I'd like to interrupt the transition while panning, but keep it while zooming. I've tried doing so with multiple methods, including the below, but nothing is working.
.call(vis.zoom)
.on("mousedown.zoom", function() {
d3.interrupt(this); <------------------ DOESN'T WORK
});
OPTION 2: I'm also open to a second option, where if I click a zoom button, a transition is only added at that point to all elements in the SVG. Again, I've tried things like the below with no success.
function zoomIn() {
timeline.zoom.scaleBy(timeline.svg, 1.5);
timeline.svg.transition().duration(1000); <----- DOESN'T WORK
timeline.wrangleData();
}
FULL EXAMPLE: https://jsfiddle.net/kre96sdy/2/
I was able to figure it out on my own (using OPTION 2) with the help of a recent addition of a reset button which Mike Bostock added to this gist:
https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f
function resetted() {
svg.transition()
.duration(750)
.call(zoom.transform, d3.zoomIdentity);
}
You can see that he just added a transition to the reset button, so zooming/panning with the mouse are unaffected.
So in my case I did the below and it works great:
function zoomIn() {
timeline.svg.transition()
.duration(750)
.call(timeline.zoom.scaleBy, 1.5)
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments