title: d3.js and svg: panning while zoomed in/out doesn't work
body: <p>I have a map I've drawn in an SVG using d3, and the SVG is inside a viewbox, something like:</p>
  
  <pre><code>&lt;svg id="mapcanvas" class="map-svg flow" viewBox="60 -20 800 500"&gt;
  
      &lt;defs&gt;...&lt;/defs&gt;
      &lt;g class="zoomgroup" transform="translate(300,162.02921295166016)scale(0.5)"&gt;
          &lt;rect class="mapocean" width="150%" height="150%" y="-150"&gt;&lt;/rect&gt;
          &lt;g class="mapgroup"&gt;
              &lt;path class="country AF" ...&gt;
              ...
  </code></pre>
  
  <p>I've done the standard pan/zoom set up, which sets the transform attribute of the <code>&lt;g class="zoomgroup"&gt;</code>.  The code (slightly cleaned up) is:</p>
  
  <pre><code>// zoomg is a d3 object represent the &lt;g class="zoomgroup"&gt; above
  var setupZoom = function(zoomg) {
      var zoomed = function() {
          var translate = d3.event.translate,
              scale = d3.event.scale;
          translate[0] = Math.max(-600*scale, Math.min(600*scale, translate[0]));
          translate[1] = Math.max(-350*scale, Math.min(350*scale, translate[1]));
  
          zoomg.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
      },
      zoom = d3.behavior.zoom()
          .translate([0, 0])
          .scale(1)
          .scaleExtent([0.5, 20])
          .on("zoom", zoomed);
      zoomg.call(zoom);
  }
  </code></pre>
  
  <p>The <a href="https://github.com/trademapper/trademapper-js/tree/22c12a76dc04512dae80f0158c858ebb244394be" rel="nofollow">full code at this commit is on github</a>.</p>
  
  <p>Zooming works fine, as does panning when you are at the initial scale.</p>
  
  <p>When you are zoomed in (scale > 1) panning is "slow" - the mouse moves further than the map does, and it gets worse the further you are zoomed in.</p>
  
  <p>When you are zoomed out (scale &lt; 1) the d3.event.translate numbers can easily reach 15000 or so, at which point the map is way outside the screen.  (That is why I added the min/max code, to stop the map disappearing).</p>
  
  <p>So I really don't understand what the d3.event.translate numbers are doing or how they're being generated, and how that relates to the viewbox.  Should I be adding x() and y() functions in the d3.behaviour.zoom() call?  If so what should those functions be?</p>
  
  <p>So can you help me get a smooth panning effect while zoomed in or out?</p>