Yakınlaştırma özelliklerini sıfırlama d3

Question

Bir nesneyi tıklattığımda ve olduğu gibi bıraktığımda svg öğesinin zoom özelliğini sıfırlamanın bir yolunu bulmaya çalışıyorum. Örneğin, bu jsfiddle'ta bir uzaklığı uzaklaştırıp kare tıklatırsanız, zum sıfırlanır ancak daha sonra ekranı kaydırmaya çalıştığımda zum, kareyi tıklatmadan önce olana geri döner. Bir kareyi tıkladığımda, yakınlaştırma% 100'e geri dönecek ve kaydırma sırasında bile% 100'de kalacak şekilde bir yol var mı?

JSFiddle:

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

Answer 1

tuşu ölçek ve çevirisini sıfırlamak sorunu yakınlaştırma davranışını anlatmak için geçerli: http://jsfiddle.net/nrabinowitz/p3m8A/

İşte benim zum çağrıdır. Bunu başarmak için, onu bir değişkene kaydedin ve SVG'nin transform özniteliğini ayarlarken değerleri uygun şekilde ayarlayın.

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 güncellendi.