title: D3 v5 zoom limit pan
body: <p>I am trying to limit pan in d3 zoom but I am not getting correct results. I am using following code to extent both <code>scale</code> and <code>translate</code>.</p>
  
  <pre><code>var treeGroup = d3.select('.treeGroup');
  var rootSVG = d3.select('.rootSVG')
  var zoom = d3.zoom()
       .scaleExtent([1.6285, 3])
       .translateExtent([[0, 0],[800, 600]])
       .on('zoom', function(){
             treeGroup.attr('transform', d3.event.transform);
       })
  
  rootSVG.call(zoom);
  </code></pre>
  
  <p>Here is the JSFiddle: <a href="https://jsfiddle.net/nohe76yd/45/" rel="nofollow noreferrer">https://jsfiddle.net/nohe76yd/45/</a></p>
  
  <p><code>scaleExtent</code> works fine but <code>translateExtent</code> is giving issues. How do I specify correct value for <code>translateExtent</code> so that while panning content always stays inside the <code>svg</code> container?</p>