D3js: How do I clear the zoom scale set by the d3.zoom event?

Question

I am using the d3.behavior to attach a zoom event to my SVG, so then the mouse wheel is used I can get a zoom event with translate and scale which I then use to set the transform attribute of the element.

It seems the zoom.scale value is persistent somewhere so every time the mouse wheel is used it always contain the correct zoom value, taking into account of all the previous zoom events. This is cool but I need a way to clear that value, say a reset zoom button. When the user clicked on the button, next time he scrolls to zoom the element will be scaling from its original size again.

So where does D3 store this value and how do I reset it?

UPDATE:
This question also has another aspect in it: if I programmatically set the "transform" attribute to do a scaling transformation, the zoom event will not take those into account. So if I later use mouse wheel to zoom I am screw because I can trashing the original transformation. Thus I need a way to programmatically set, not just reset, the "translate" and "scale" value of the zoom event, wherever it is storing them.

Answer 1

The zoom scale is stored in your zoom object. I'm guessing you have a line of code that looks like:

var zoom = d3.behavior.zoom() 

Getting the scale from that object is simple:

zoom.scale()

To zoom out x2:

zoom.scale( zoom.scale()/2 )

Translation works the same way, with zoom.translate() and zoom.translate( [x, y] ) to get and set.

To keep the display transform in sync with the zoom, just make sure that when you update one, the other is also updated.