map - d3js: Use view port center for zooming focal point -
we trying implement zoom buttons on top of map created in d3 - works on google maps. zoom event can dispatched programmatically using
d3zoombehavior.scale(mynewscale); d3zoombehavior.event(mycontainer);
and map zoom using current translation view. if using zoom buttons focal point (zoom center) no longer translation center of view port. zoom using scroll wheel have option of using zoom.center
- apparently have no effect when dispatching own event.
i'm confused how calculate next translation taking new scaling factor , view port center account.
given know current scale, next scale, current translation , dimensions of map view port how calculate next translation, center of view port not change?
i've found quite difficult in practice. approach i've taken here create mouse event triggers zoom when zoom buttons used. event created @ center of map.
here's relevant code:
.on("click", function() { var evt = document.createevent("mouseevents"); evt.initmouseevent( 'dblclick', // in domstring typearg, true, // in boolean canbubblearg, true, // in boolean cancelablearg, window,// in views::abstractview viewarg, 120, // in long detailarg, width/2, // in long screenxarg, height/2, // in long screenyarg, width/2, // in long clientxarg, height/2, // in long clientyarg, 0, // in boolean ctrlkeyarg, 0, // in boolean altkeyarg, (by > 0 ? 0 : 1), // in boolean shiftkeyarg, 0, // in boolean metakeyarg, 0, // in unsigned short buttonarg, null // in eventtarget relatedtargetarg ); this.dispatchevent(evt); });
the whole thing bit of hack, works in practice , i've found easier calculate correct center every offset/zoom.
Comments
Post a Comment