title: d3.js: Zoom on click event
body: <p>I was trying to get same behavior <a href="http://bl.ocks.org/linssen/7352810" rel="noreferrer">Wil Linssen's implementation</a>
  but on d3.js version 4.
  I am quite confused with zoom api in version 4.</p>
  
  <p>The changes that I made in the original implementation is:
  <code>zoom.translate()</code> replaced with 
     <code>d3.zoomTransform(selection.node())</code> and appropriate points added instead:</p>
  
  <pre><code>svg.attr("transform",
      "translate(" + t.x + "," + t.y + ")" +
      "scale(" + t.k + ")"
  );
  </code></pre>
  
  <p>This one:</p>
  
  <pre><code>zoom
    .scale(iScale(t))
    .translate(iTranslate(t));
  </code></pre>
  
  <p>replaced to</p>
  
  <pre><code>var foo = iTranslate(t);
  zoom.
    translateBy(selection, foo[0], foo[1]);
  zoom
    .scaleBy(selection, iScale(t));
  </code></pre>
  
  <p>But it's still has a problem, looks like with scale, zoom out...</p>
  
  <p>Example: <a href="https://jsfiddle.net/vbabenko/8t0rv5yn/3/" rel="noreferrer">Example on d3.v4 - jsfiddle</a></p>
  
  <p>Thanks for the help</p>