title: D3 Collapsible Tree how to make it vertically scrollable
body: <p>I have a D3 collapsible tree, the problem is that a single node can have upto 4000 leaves. I would like to make it scrollable or expandable, i.e. the height should work for both 10 leaf nodes or several 1000.</p>
  
  <p>Currently my height parameter is static, can anyone tell me how I can make it dynamic? </p>
  
  <p>The following is the code:</p>
  
  <pre><code>$(function(){
  var m = [20, 120, 20, 120],
      w = 1280 - m[1] - m[3],
      h = 80000 - m[0] - m[2],
      i = 0,
      root;
  
  var tree = d3.layout.tree()
      .size([h, w]);
  
  var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.y, d.x]; });
  
  var vis = d3.select("#modelPatterns").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
    .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  
  d3.json("./static/data/type1Tree.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
  
    function toggleAll(d) {
      if (d.children) {
        d.children.forEach(toggleAll);
        toggle(d);
      }
    }
  
    // Initialize the display to show a few nodes.
    root.children.forEach(toggleAll);
    //toggle(root.children[1]);
    //toggle(root.children[1].children[2]);
    //toggle(root.children[9]);
    //toggle(root.children[9].children[0]);
  
    update(root);
  });
  </code></pre>