확대/축소 속성 재설정 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.