d3.js v4程序化Pan + Zoom.如何? [英] d3.js v4 programmatic Pan+Zoom. How?

问题描述

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

I did a small example of what i am trying to implement, here it is - https://jsfiddle.net/zeleniy/4sgqgcx0/. You can zoom and pan SVG image as usual. But i have no idea how to implement zoom programmatically when user click on "+" and "-" buttons. Especially if he already zoom in/out and pan original image. Could you help me?

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

On line 13 of the code you will find zoom event handler.

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

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

On lines 35 and 39 - zoom event handlers

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

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

因此，当用户单击"+"应用程序时，应放大，就像鼠标位于SVG元素的中心一样.和-"相同.

So when user click on "+" app should zoom in as if mouse were at the center of SVG element. And the same with "-".

推荐答案

感谢填写.这是jsfiddle的更新版本.

Thanks to Fil. Here is an updated version of 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);
});

这篇关于d3.js v4程序化Pan + Zoom.如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！