ズームのプロパティをリセットするd3

Question

私はオブジェクトをクリックしたままにしておくと、自分のsvgのズームプロパティをリセットする方法を見つけようとしています。たとえば、このjsfiddleをズームアウトして正方形をクリックすると、ズームがリセットされますが、画面をパンしようとすると、ズームが正方形をクリックする前の状態に戻ります。そのような方法で、正方形をクリックすると、ズームは100％に戻り、パンニングしても100％にとどまりますか？

JSFiddle：

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

Answer 1

キーを使用して、規模や翻訳をリセットしているズーム動作を伝えることです。ここではhttp://jsfiddle.net/nrabinowitz/p3m8A/

は私のズーム呼び出しがあります。これを達成するには、SVGの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); 
    }); 

jsfiddle hereが更新されました。