Customizing Zoom Behavior

[Arvind Satyanarayan]

Hi there,

I'm sorry but I'm not able to find much documentation/examples on how the zoom behavior in d3 works and I had a couple of questions on how I can customize the behavior beyond what I'd seen in the three examples provided:

1. Is there a way to tell what the current zoom level is, and trigger it via a control? I would like to provide zooming functionality via a slider control and so I'd like to be able to update the control if someone zooms in via a mouse/trackpad, but also allow people to move the slider to zoom in/out. 

2. When zoomed in, I'm able to pan around the svg until I hit the edge, after which I can no longer continue panning. Is there a way to detect when I've hit this edge, and can no longer pan? I'd like to basically show/hide an arrow to make it obvious to the user if there is more space for them to explore by panning. 

Thanks for the help!

-Arvind

[Arvind Satyanarayan]

So I have a partial answer to #1 - the current zoom level is available via d3.event.scale. So now I'm able to update my slider control when someone zooms via a mouse scroll wheel. How to trigger zooming via the slider remains an open question. 

For #2, d3.event.translate contains information on how the svg has been panned and so I am able to test for 0s or max widths/heights to achieve what I want. 

I'll update this thread as I discover more in d3's internals. 

-Arvind

[David Krider]

Did you ever get any further with this? Is there any way to call or
create a d3 event, and feed it the slider value as a zoom level?

dk

[Arvind Satyanarayan]

What I ended up doing was manually firing a "mouse scroll" event. This stackoverflow thread contains more information: http://stackoverflow.com/questions/6776754/implementing-zoom-buttons-using-d3

I only needed it to work in Webkit, so here was my code for it:

        function fireZoomEvent(oldVal, newVal) {

            // void initWebKitWheelEvent(int wheelDeltaX, int wheelDeltaY, DOMWindow   

            //             view, int screenX, int screenY, int clientX, int clientY, bool ctrlKey,   

            //             bool altKey, bool shiftKey, bool metaKey);

            var evt = document.createEvent("WheelEvent");

            evt.initWebKitWheelEvent(0, (newVal - oldVal) * 90, window, 

                                                        width/2, height/2, width/2, height/2, 

                                                        false, false, false, false);

            document.getElementById('stage').dispatchEvent(evt);

        }

and then within slider.slide(), I called fireZoomEvent. It's not entirely perfect code (the second parameter to the initWebKitWheelEvent is incredibly hacky, but produced the zoom levels I needed...). 

But hopefully this gives you a starting point. 

-Arvind
-----
Arvind Satyanarayan <http://arvindsatya.com/>