javascript - D3 v4 - 添加过渡以仅缩放而不是平移/拖动

Question

我想在缩放时对所有元素使用过渡，但不在平移时使用过渡。

选项 1:我想在平移时中断过渡，但在缩放时保持过渡。我尝试过多种方法，包括下面的方法，但没有任何效果。

  .call(vis.zoom)
  .on("mousedown.zoom", function() {
    d3.interrupt(this);  <------------------ DOESN'T WORK
  });

选项 2: 我也愿意接受第二个选项，如果我单击缩放按钮，则仅在该点向 SVG 中的所有元素添加过渡。再次，我尝试了下面的方法，但没有成功。

function zoomIn() {
  timeline.zoom.scaleBy(timeline.svg, 1.5);
  timeline.svg.transition().duration(1000); <----- DOESN'T WORK
  timeline.wrangleData();
}

完整示例: https://jsfiddle.net/kre96sdy/2/

Answer 1

借助最近添加的重置按钮(Mike Bostock 添加到此要点中)，我能够自己解决这个问题(使用选项 2):

https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

function resetted() {
  svg.transition()
    .duration(750)
    .call(zoom.transform, d3.zoomIdentity);
}

您可以看到他只是为重置按钮添加了一个过渡，因此使用鼠标进行缩放/平移不受影响。

因此，就我而言，我执行了以下操作，效果很好:

function zoomIn() {
  timeline.svg.transition()
    .duration(750)
    .call(timeline.zoom.scaleBy, 1.5)
}