Implementing zoom buttons using d3

I am trying to develop a graph visualization webpage using d3, and I need to provide basic zoom and pan functionality over the graph.

I saw the d3.behaviour.js file to see how the zoom functionality works. It is fine as far as the default behavior goes. But is there any way by开发者_C百科 which the zoom function can be called manually, lets say by attaching it to zoom it and zoom out buttons.

Zoom behavior in d3 seems very tied to the mouse events.

A workaround you can do is manually firing 'mousewheel' (ie/webkit) and 'DOMMouseScroll' (firefox) events when you click a button.

You can see an example on how to register and dispatch these events here: http://jsfiddle.net/6nnMV/

I think you just need to get the current scale, increase/decrease by one, and then set it back https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-scale.

After that, employ https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-event to update the visualization with the new scale.