[Solved]-D3.js - how to add zoom button with the default wheelmouse zoom behavior-d3.js

The math for zooming in to the center of the screen, and not towards the top-left corner or 0lat/0lon, is fairly tricky to get right. I'm copying it from Wil Linssen's example and grafting it on to Mike Bostock's Map Pan & Zoom I. Importantly, that example uses SVG transforms to rerender the map, rather than recomputing the projection constantly. There are a few ways you might want the buttons to work:

• Zoom Buttons I - Pressing a button causes a transition to the new view. Holding the button down does not restart the transition.

• Zoom Buttons II - Pressing and holding the button causes the new view to be updated immediately, every 40ms. This leads to unpleasant jumps, especially when clicking the button repeatedly.

• Zoom Buttons III - 100ms chained transitions that continue until the button is no longer held or the scaleExtent is met. Control logic prevents any undesirable instant panning. This is the one to use.

Again, getting the details right is tricky, which is why I'm providing full examples. But satisfyingly, the core logic does make sense. You're zeroing a vector, stretching it, and unzeroing it:

x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];