title: D3.js - how to add zoom button with the default wheelmouse zoom behavior
body: <p>So I got a worldmap with mouse zoom using the default d3.behavior.zoom() and limits to prevent the map from being dragged completely out of the page. This was a pain to get working, but it now work.</p>
  
  <p>My problem now is that this project also require useless zoom + and - button in the interface and I can't found example featuring both type of zoom. It's either mouse zoom only or a crappy zoom by button only.</p>
  
  <p>I tried simply calling zoom.scale(newScale); but it don't update anything. I seem to be on the right track since in the console you can see that the scale is updated but it don't update and when I zoom with the mouse it suddenly skip to the scale that was defined using the button. But it seem I also need to update the translate and I'm not sure how to get like the center of the map and calculate the translate needed to zoom to there.</p>
  
  <p>I also need to know how to update the projection after calling zoom.scale(newScale); if it's  the way to do that.</p>
  
  <p>I made a simplified demo with zoom button obviously not working right now.
  <a href="http://bl.ocks.org/jfmmm/f5c62bc056e557b80447" rel="noreferrer">http://bl.ocks.org/jfmmm/f5c62bc056e557b80447</a></p>
  
  <p>Thanks!</p>
  
  <p>edit:
  So close now, it zoom to the center of the map because I use the same calculation I used to calculate the middle of the screen, but whit the new scale. The problem is that I want it to zoom on the object in the middle of the screen, not always the country at the middle of the map.</p>
  
  <pre><code>function zoomBtn(action) {
      var currentZoom = zoom.scale();
  
      if( action == 'in' ){
          if(currentZoom &lt; options.maxZoomLevel){
              var newScale = Math.floor(currentZoom) + 1;
  
              var b = path.bounds(mapFeatures);
              var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];
  
              zoom.scale(newScale)
                  .translate(t)
                  .event(svg);
          }
      }else{
          if(currentZoom &gt; options.minZoomLevel){
              var newScale = Math.floor(currentZoom) - 1;
  
              var b = path.bounds(mapFeatures);
              var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];
  
              zoom.scale(newScale)
                  .translate(t)
                  .event(svg);
          }
      }
  }
  </code></pre>
  
  <p>i'll update my example in a min.</p>