Resetowanie właściwości powiększania d3

Question

Próbuję znaleźć sposób na zresetowanie właściwości zoomu mojego svg za każdym razem, gdy kliknę obiekt i pozostawię go w niezmienionym stanie. Na przykład w tym jsfiddle, jeśli pomniejszysz i klikniesz kwadrat, zoom zostanie zresetowany, ale kiedy spróbuję przesunąć ekran, zoom powróci do stanu sprzed kliknięcia kwadratu. Czy istnieje sposób, że gdy klikam na kwadrat, zoom cofa się do 100% i pozostaje na poziomie 100% nawet podczas panoramowania?

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

Oto moje wezwanie zoom:

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

Answer 1

Najważniejsze jest, aby powiedzieć, że zachowanie powiększenia jesteś resetowanie skalę i tłumaczenia. Aby to osiągnąć, po prostu zapisz go w zmiennej i ustaw odpowiednio wartości podczas ustawiania atrybutu SVG na 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); 
    }); 

Zaktualizowany jsfiddle here.