Ripristino delle proprietà di zoom d3

Question

Sto cercando un modo per reimpostare la proprietà zoom del mio svg ogni volta che clicco su un oggetto e lo lascia così com'è. Ad esempio in questo jsfiddle se si esegue lo zoom indietro e si fa clic su un quadrato, lo zoom viene ripristinato, ma poi quando provo a scorrere lo schermo lo zoom ritorna a ciò che era prima che clicchi sul quadrato. C'è un modo tale che quando clicco su un quadrato, lo zoom ritorna al 100% e rimane al 100% anche quando si esegue il panning?

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

Qui è la mia chiamata zoom:

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

Answer 1

La chiave è di informare il comportamento di zoom che si sta reimpostando scala e la traduzione. Per ottenere ciò, è sufficiente salvarlo in una variabile e impostare i valori in modo appropriato mentre si imposta l'attributo transform di SVG.

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

Aggiornamento jsfiddle here.