Сброс свойств масштабирования d3

Question

Я пытаюсь найти способ сбросить свойство масштабирования моего svg всякий раз, когда я нажимаю на объект и оставляю его как есть. Например, в этом jsfiddle, если вы уменьшаете масштаб и нажимаете на квадрат, масштабирование сбрасывается, но затем, когда я пытаюсь панорамировать экран, зум возвращается к тому, что было до того, как я нажал на квадрат. Есть ли способ, который, когда я нажимаю на квадрат, увеличивает масштаб до 100% и остается на 100% даже при панорамировании?

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

Вот мой зум вызов:

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

Answer 1

Ключ сказать поведение масштабирования, вы сбрасывая масштаб и перевод. Для этого просто сохраните его в переменной и задайте значения соответствующим образом, когда вы устанавливаете атрибут 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.