title: D3 force graph doesn't pan or zoom as expected
body: <p>I've built a D3 force graph largely based on <a href="http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/" rel="nofollow noreferrer">these really helpful examples</a>.</p>
  
  <p>I wanted to add pan and zoom functionality, which I tried to do using another example (looks like I can only include two links, but Google "d3 force zoom eyaler" to find it).</p>
  
  <p>Unfortunately, when I zoom out on a graph that is larger than the initial SVG, I get something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Z2Tzw.png" rel="nofollow noreferrer">Result of dragging and dropping</a></p>
  
  <p>Here's the relevant code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));
  
  function redraw() {
    svg.attr("transform",
        "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I change the pan and zoom behaviour so that it scrolls and makes it possible to see the rest of the graph, rather than just allowing me to move the square that was originally visible?</p>