title: D3 pan+ zoom constraints
body: <p>I'm trying to zoomable/draggle rectangle from going outside of the svg bounds when panning and zooming. I've tried to  implement it based off of this <a href="http://bl.ocks.org/mbostock/4987520" rel="nofollow noreferrer">example</a>, but i cant seem to get it to work. I've created <a href="http://jsfiddle.net/d3wxP/" rel="nofollow noreferrer">this jsfiddle</a> with just the rectangle that is zoomable and draggable. Again, im trying to make it so that you can not drag the rectangle outside of the svg box i put the border on. I know i need to update the move function. the code below is from the first link example but it does not seem to work well so i commented part of it out.</p>
  
  <pre><code>function move() {
    var t = d3.event.translate,
    s = d3.event.scale;
  
    //t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
    //t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
    //zoom.translate(t);
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  }
  </code></pre>
  
  <p>Edit: So additionally i need to be able to drag the rectangle when you are zoomed in all the way and its bigger than the svg. In the image below, the blue rectangle is the svg and green would be the rectangle and you are zoomed in all the way so that the green rectangle takes up the much more than the SVG. This is similar to the map in the <a href="http://bl.ocks.org/mbostock/4987520" rel="nofollow noreferrer">constrained zoom example</a>. You can zoom into the states and drag across the country, navigating to states outside the current svg size</p>
  
  <p><img src="https://i.imgur.com/PUro0dz.png" alt="example"></p>