Đặt lại các thuộc tính thu phóng d3

Question

Tôi đang cố gắng tìm cách đặt lại thuộc tính thu phóng của svg của tôi bất cứ khi nào tôi nhấp vào một đối tượng và để nguyên nó. Ví dụ trong jsfiddle này nếu bạn thu nhỏ và nhấp vào một hình vuông, thu phóng được đặt lại nhưng sau đó khi tôi cố gắng xoay màn hình, zoom sẽ quay trở lại trước khi tôi nhấp vào hình vuông. Có cách nào như vậy khi tôi nhấp vào một hình vuông, thu phóng quay trở lại 100% và vẫn ở mức 100% ngay cả khi panning?

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

Đây là cuộc gọi zoom của tôi:

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

Answer 1

Điều quan trọng là nói với các hành vi zoom mà bạn đang đặt lại quy mô và dịch. Để đạt được điều này, chỉ cần lưu nó trong một biến và thiết lập các giá trị thích hợp khi bạn đang thiết lập các thuộc tính transform của 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); 
    }); 

Cập nhật jsfiddle here.