title: Using d3.behavior.drag() to pan a map
body: <p>I am having some issues applying D3's behavior.drag() on a map. In this example, dragging the map results in a very fast pan, and the point clicked does not stay with the mouse  - <a href="http://bl.ocks.org/jczaplew/6453048" rel="nofollow noreferrer">http://bl.ocks.org/jczaplew/6453048</a></p>
  
  <p>My drag behavior code looks like this - </p>
  
  <pre><code>var drag = d3.behavior.drag()
    .origin(function() { return {x: rotate[0], y: -rotate[1]}; })
    .on("drag", function() {
      rotate[0] = d3.event.x;
      rotate[1] = -d3.event.y;
  
     // Refresh the map
      projection.rotate(rotate);
      path = d3.geo.path().projection(projection);
      d3.selectAll("path").attr("d", path);
  });
  </code></pre>
  
  <p>What I need:</p>
  
  <ol>
  <li>Panning without translating the entire SVG. The ability to pan off the map (a concern expressed in this question - <a href="https://stackoverflow.com/questions/14909054/zooming-and-panning-a-mercator-map-centered-on-the-pacific-using-d3-js?rq=1">Zooming and Panning a Mercator Map centered on the Pacific using d3.js</a> and demonstrated in this example -  <a href="http://bl.ocks.org/d3noob/4966228" rel="nofollow noreferrer">http://bl.ocks.org/d3noob/4966228</a>) is undesirable.</li>
  <li>When the user clicks and drags the map, the point clicked sticks to the cursor (i.e. clicking on and dragging Spain rotates the map around Spain)</li>
  </ol>
  
  <p>I suspect this issue has something to do with drag.origin(), but perhaps I shouldn't be using d3.behavior.drag() at all? Any and all assistance is greatly appreciated!</p>