title: How to make force layout graph in D3.js responsive to screen/browser size
body: <p>I have a graph using force layout, but it has a fixed width <code>w</code> and height <code>h</code>:</p>
  
  <pre><code>var svg = d3.select("#viz").append("svg")
              .attr("id", "playgraph")
              .attr("width", w)
              .attr("height", h)
  
  var force = d3.layout.force()
                .nodes(nodes)
                .links(links)
                .charge(-1600)
                .linkDistance(45)
                .size([w, h]); 
  </code></pre>
  
  <p>which results in a svg graph that does not scale or down despite of changes in screen or browser window size. In order to make it responsive (i.e. automatically resizes itself), I tried using <code>viewBox</code> and <code>preserveAspectRatio</code> attributes:</p>
  
  <pre><code>var svg = d3.select("#viz").append("svg")
              .attr("id", "playgraph")
              .attr("width", w)
              .attr("height", h)
              .attr("viewBox", "0, 0, 600, 400")
              .attr("preserveAspectRatio", "xMidYMid meet");
  </code></pre>
  
  <p>Unfortunately, this didn't work as nothing happens when I adjust the browser window size. I wonder if the <code>.size([w, h])</code> of the force graph has anything to do with this.</p>
  
  <p>Please shed some light on how to use <code>viewBox</code> and <code>preserveAspectRatio</code> attributes with force layout graphs.</p>