title: D3 force layout: making pan on drag (zoom) smoother
body: <p>I've got a d3.js static force layout graph that can get rather big (sometimes parts of it are clipped), so I'd like to let the user pan the whole graph by dragging. I don't think I need dragging of individual nodes, I've got a feeling that's just going to be confusing, but would like to make it possible to show the parts of the graph that are clipped by the svg boundaries.</p>
  
  <p>I've got a minimal example at <a href="http://bl.ocks.org/3811811">http://bl.ocks.org/3811811</a> which uses </p>
  
  <pre><code>visF.append("rect")
   .attr("class", "background")
   .attr("width", width)
   .attr("height", height)
   .call(d3.behavior.zoom().on("zoom", redrawVisF));
  function redrawVisF () {
    visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
  }
  </code></pre>
  
  <p>to implement the panning, but I find it really "skittery" and not very smooth at all, to the point where I'm guessing it will stop people from trying the drag function at all. Has anyone got a clue why this happens and/or an idea for how to fix it? </p>