Reset d3 scaling properties

Question

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

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

Here is my scaling call:

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

Answer 1

The key is to talk about the scaling behavior that you reset and scale. To do this, simply store it in a variable and set the values ​​accordingly when you set the transform SVG attribute.

 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); }); 

Updated jsfiddle here .