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

我能够自己解决这个问题（使用 OPTION 2 ），最近添加了一个重置按钮，Mike Bostock在这个要点中添加了一个重置按钮：

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

D3 v4 - 将转换添加到仅缩放而不是平移/拖动

1 个答案: