d3.js v4 编程式平移+缩放。如何实现？

Question

我做了一个小例子来展示我正在尝试实现的东西，这里是链接：https://jsfiddle.net/zeleniy/4sgqgcx0/。您可以像往常一样缩放和平移SVG图像。但是，如果用户单击“+”和“-”按钮，我不知道如何以编程方式实现缩放。特别是如果他已经缩放和平移了原始图像。你能帮我吗？

在代码的第13行，您将找到缩放事件处理程序。

var zoom = d3.zoom()
    .on('zoom', function() {
        canvas.attr('transform', d3.event.transform);
    });

在第35行和第39行 - 缩放事件处理程序

d3.select('#zoom-in').on('click', function() {
    // what here?
});

d3.select('#zoom-out').on('click', function() {
    // what here?
});

当用户点击“+”时，应用程序应该放大，就好像鼠标位于SVG元素的中心一样。同样的操作也适用于“-”。

- zeleniy

Answer 1

感谢Fil的支持。这里是一个更新版的jsfiddle。

d3.select('#zoom-in').on('click', function() {
  // Smooth zooming
  zoom.scaleBy(svg.transition().duration(750), 1.3);
});

d3.select('#zoom-out').on('click', function() {
  // Ordinal zooming
  zoom.scaleBy(svg, 1 / 1.3);
});

- zeleniy

---

有人注意到scaleBy方法似乎会影响变换的x和y吗？我觉得这不是想要的结果。 - David Blaney