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

Question

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/

Answer 1

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)
}