title: D3 - Setting the zoom scale of Double Click
body: <p>I've been looking around and haven't found a solid solution for setting the zoom scale of when a user double clicks the screen.</p>
  
  <p>The furthest I got is by setting scaleVal as shown in the function dblclicked() shown here in the fiddle </p>
  
  <p><a href="https://jsfiddle.net/helloGoodDay/62vq9h8p/3/" rel="nofollow">https://jsfiddle.net/helloGoodDay/62vq9h8p/3/</a></p>
  
  <pre><code>            function dblclicked()
              {
                  var translate = zoom.translate(),
                      mouse = d3.mouse(this),
                      scaleOld = zoom.scale(),
                      zoomOld = Math.log(scaleOld) / Math.LN2,
                      zoomNew = d3.event.shiftKey ? Math.max(minScale + 8, Math.ceil(zoomOld) - 1) : Math.min(maxScale + 8, Math.floor(zoomOld) + 1),
                      scaleNew = Math.pow(scaleVal, zoomNew),
                      zoomDelta = scaleNew / scaleOld;
  
                   svg.transition()
                       .duration(350)
                       .call(zoom
                       .scale(scaleNew)
                       .translate([(translate[0] - mouse[0]) * zoomDelta + mouse[0], (translate[0] - mouse[0]) * zoomDelta + mouse[0]])
                       .event);
  
                   d3.event.stopImmediatePropagation();
              }
  </code></pre>
  
  <p>However, if you double click a bit more, the nodes disappear and I don't like the animation as well.</p>
  
  <p>Is there a way to set the value of the zoom scale in a way that the nodes do not disappear and that the animation isn't this fidgety? </p>
  
  <p>Edit: The function is from <a href="https://github.com/d3/d3/issues/1985" rel="nofollow">https://github.com/d3/d3/issues/1985</a></p>