d3.js v4程序化Pan + Zoom。怎么样？

Question

我做了一个我要实现的小例子，这里是-https://jsfiddle.net/zeleniy/4sgqgcx0/。您可以照常缩放和平移SVG图像。但是我不知道当用户单击“ +”和“-”按钮时如何以编程方式实现缩放。特别是当他已经放大/缩小和平移原始图像时。你可以帮帮我吗？

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

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元素的中心一样。与“-”相同。

Answer 1

由于费尔。下面是一个更新的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);
});