title: D3: Use brush to zoom to specific interval
body: <p>please see the following D3 example:</p>
  
  <p><a href="https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6</a></p>
  
  <p>In this example, the user is able to draw a brush on the screen and then the graph zooms to the region encapsulated by the brush. The way this example works is by updating the x and y scale domains based on the brush extent. You can see that in the brushended() function.</p>
  
  <p>I am looking to achieve this same functionality. However, I do not want to update the x and y scale domains but want to update the zoom scale and translate. The following example achieves this for a map:</p>
  
  <p><a href="https://bl.ocks.org/mmazanec22/586ee6674f52840492c16cc194aacb1f" rel="nofollow noreferrer">https://bl.ocks.org/mmazanec22/586ee6674f52840492c16cc194aacb1f</a></p>
  
  <p>You can see this is the brushend() function. Here the writer calculates a scale and translation based on the brush extent and then uses them to set a new scale and translate for the zoom behaviour. I am looking to achieve this however for a scatter plot. </p>
  
  <p>I have a written an example of what I have tried in this jsfiddle: <a href="https://jsfiddle.net/SSS123/uxdd760k/1/" rel="nofollow noreferrer">https://jsfiddle.net/SSS123/uxdd760k/1/</a> - see the part where I do my scale and translate calculations below:</p>
  
  <pre><code>            var extent = brush.extent();
  
              // Get box coordinates
              var lowerX = d3.min([extent[0][0], extent[1][0]]);
              var upperX = d3.max([extent[0][0], extent[1][0]]);
              var lowerY = d3.min([extent[0][1], extent[1][1]]);
              var upperY = d3.max([extent[0][1], extent[1][1]]);
  
              var scale = Math.max( ( width / (x(upperX) - x(lowerX)) ), ( height / (y(upperY) - y(lowerY)) ) );
  
              graphContainer.transition()
                  .duration(750)
                  .call(zoom.scale(scale).translate([-x(lowerX), -y(upperY)]).event);
  </code></pre>
  
  <p>I believe this now works fine for the case when you draw a brush with a width the same size as the height i.e. if you try drawing a box that stretches from 0 to 5 on the xAxis and 0 to 5 on the yAxis then this will zoom in quite well.</p>
  
  <p>However, if you draw a box with 0 - 5 on the xAxis but 0 - 30 on the yAxis then this will no longer calculate a sensible zoom scale.</p>
  
  <p>Has anyone any advise on how to solve this?</p>