d3.js - Resetting zooming properties d3

Question

I'm trying to find a way to reset the zoom property of my svg whenever I click on an object and leave it as is. For example in this jsfiddle if you zoom out and click on a square, the zoom gets reset but then when I try to pan the screen the zoom goes back to what it was before I clicked on the square. Is there a way such that when I click on a square, the zoom goes back to 100% and stays at 100% even when panning?

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

Here is my zoom call:

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

Answer 1

关键是告诉缩放行为您正在重置比例和平移。为此，只需将其保存在一个变量中，并在设置transformSVG 的属性时适当地设置值。

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 。