Question

我试图找到一种方法来重置我的svg的缩放属性，每当我点击一个对象并保持原样。例如，在这个jsfiddle中，如果你缩小并点击一个正方形，缩放就会重置，但是当我尝试平移屏幕时，缩放会恢复到我点击正方形之前的状态。有没有这样的方式，当我点击一个正方形时，变焦会回到100％，即使平移也会保持在100％？

JSFiddle：http://jsfiddle.net/nrabinowitz/p3m8A/

这是我的缩放调用：

svg.call(d3.behavior.zoom().on("zoom", redraw));

Answer 1

关键是要告诉缩放行为您正在重置缩放和平移。要实现此目的，只需将其保存在变量中，并在设置SVG的transform属性时适当设置值。

var zoom = d3.behavior.zoom();
svg.call(zoom.on("zoom", redraw));
// ...
.on("click", function () {
        counter++;
        canvas
          .transition()
          .duration(1000)
          .attr('transform', "translate(" + (offset * counter) + ",0)");
        zoom.scale(1);
        zoom.translate([offset * counter, 0]);
     drawBox(x, y);
    });

更新了jsfiddle here。

重置缩放属性d3

1 个答案: