d3.behavior.zoom - reset to translate(0,0) and scale1

[Francis Hemsher]

The zoom behavior works just dandy for mouse wheel zoom in/out and
mouse down pan when applied to SVG <g> elements..

After the user has zoom/panned, I provide a 'reset zoom' selection
that returns the SVG <g> element to translate(0,0) and scale=1

However, I can't get access to reset the behavior, so when the user
wants to again zoom/pan, the SVG <g> element returns to its previous
behavior translate and scale values.

Is there a way to reset the zoom behavior to its initialized translate
and scale values, i.e. translate{[0,0]) and scale(1) ?

(Also, I probably need to reset the mouseDelta value... is that
possible?)

Thanks,
Francis

[Mike Bostock]

Yes, if `zoom` is your d3.behavior.zoom instance: zoom.translate([0,
0]).scale(1).

Mike

[Francis Hemsher]

Hi Mike,

I had previously tried that, but received the error message:
"object does not support property or method."

(I'm currently running this application in IE9)

Thanks,
Francis

[Mike Bostock]

> I had previously tried that, but received the error message:
> "object does not support property or method."

Perhaps you're calling it on the wrong object? Some of the examples
may also have a callback function called "zoom", which you might need
to rename.

Mike

[Francis Hemsher]

I linked to d3.v2.js and now it works OK.

[Karl Guillotte]

Hi,

Is there a working example somewhere? I am having the same issue and I can't solve it.

Thanks

[Karl Guillotte]

Solved! 

For the one interested, from  http://jsfiddle.net/TXPcM/. In function setInitialScale the call to function applyZoom need to be the last statement. 

[Olivier Clément]

Not quite; I'm trying to achieve a similar functionality, resetting the translate and scale value when some value changes, 

and I'm having the same issue that Karl has:

In his fiddle (http://jsfiddle.net/TXPcM/), zoom out like crazy (just so it's more obvious) and pan the chart. Click on the Default Zoom button

It works.

But then try to pan the graph. Has soon as you start panning, the zoom level gets back to what it was before you reset it (clicking the button)

Any ways around that?

Thanks

[Olivier Clément]

Got it working now

You also have to reset the zoom instance like so:

(assuming zoom is your d3.behavior.zoom() instance)

zoom.scale(1);

zoom.translate([0, 0]);

vis.transition().duration(500).attr('transform', 'translate(' + zoom.translate() + ') scale(' + zoom.scale() + ')')

[Karel Mácha]

Hello,

I am trying to temporarily disable zoom in my visualization. I save the current zoom and translation values when the zoom is disabled and re-set the zoom zoom.scale and zoom.translate when the zoom is re-enabled. But it does not work as expected. I made a simple example here :  http://jsfiddle.net/La8PR/5/

The zooming/scaling seems to be working. But the translation works not as expected. Here how to reproduce the behavior  :

1. Click on the circle - it changes the color to blue, translation is disabled

2. Drag the background in one direction with the mouse as if you would pan

3. Click on the circle again, it is getting red, the zooming is re-enabled now

4. Drag the background again - it makes a jump to the position where you moved it when the zooming was disabled

Strange thing is, that the same procedure works well for the scaling. 

I am not able to find my mistahe, could please anyone help me ?