Question

我做了一个我想要实现的小例子，这里是 - https://jsfiddle.net/zeleniy/4sgqgcx0/。您可以像往常一样缩放和平移SVG图像。但我不知道如何在用户点击＆＃34; +＆＃34;时以编程方式实现缩放。和＆＃34; - ＆＃34;纽扣。特别是如果他已经放大/缩小并平移原始图像。你能帮帮我吗？

在代码的第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?
});

所以当用户点击＆＃34; +＆＃34;应该放大应用程序，就像鼠标位于SVG元素的中心一样。与＆＃34; - ＆＃34;相同。

Answer 1

感谢Fil。这是jsfiddle的updated版本。

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。如何？

1 个答案: