Keven Keven - 11 months ago 323
Javascript Question

D3 v4 - add transition to just zoom and not pan/drag

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.

.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


Answer Source

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:

function resetted() {
    .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 works great:

function zoomIn() {
    .call(timeline.zoom.scaleBy, 1.5)