title: Zoom softly into the center of a D3 map
body: <p>I have a create an <strong><a href="http://arda-maps.org/ages/first" rel="nofollow noreferrer">interactive map</a></strong>. This map can be zoomed via buttons. These buttons already work but I don't like the current style. It does not feel UX-friendly when by clicking the button the map is shaking a bit. I would like to zoom into the center of the map softly instead.</p>
  
  <p><img src="https://i.stack.imgur.com/KSddj.png" alt="enter image description here"></p>
  
  <p>Here zoom-in <strong>code</strong> on the <strong>button</strong>:</p>
  
  <pre><code>d3.select('#zoomplusbutton').on('click', function () {
      ardamap.zoomByFactor(1.3);
  });
  </code></pre>
  
  <p>And here the <strong>function code</strong> with the strange zooming:</p>
  
  <pre><code>zoomByFactor: function (factor) {
                  d3.event.preventDefault();
                  var scale = zoom.scale();
                  var extent = zoom.scaleExtent();
                  var newScale = scale * factor;
                  if (extent[0] &lt;= newScale &amp;&amp; newScale &lt;= extent[1]) {
                      var t = zoom.translate();
                      var c = [width / 2, height / 2];
                      zoom
                          .scale(newScale)
                          .translate([c[0] + (t[0] - c[0]) / scale * newScale, c[1] + (t[1] - c[1]) / scale * newScale])
                          .event(g.transition());
                  }
              }
  </code></pre>
  
  <p>I really don't know anymore where I got this zooming code from.</p>
  
  <p>So how can I really zoom to the center of the map softly? Feel free to change the JS-code on the website.</p>