title: d3.js tree layout is bunching everything up at the top
body: <p>I'm trying to use d3js to create a tree graph with two nodes connected to each other. My JS is as follows:</p>
  
  <pre><code>var width = window.innerWidth;
  var height = window.innerHeight;
  
  var nodes = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
  var links = [{"source":0,"target":1}];
  
  var svg = d3.select("body").append("svg");
  svg.attr("width", width);
  svg.attr("height", height);
  svg.append("svg:g");
  
  var tree = d3.layout.tree();
  tree.size([width, height]);
  tree.nodes(nodes);
  tree.links(links);
  
  var diagonal = d3.svg.diagonal.radial()
      .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
  
    var link = svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);
  
    var node = svg.selectAll(".node")
        .data(nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
  
    node.append("circle")
        .attr("r", 4.5);
  
    node.append("text")
        .text(function(d) { return d.name; });
  </code></pre>
  
  <p>So I'm setting the width and height of the SVG equal to the window width / height. And yet everything is bunched up at the top right.</p>
  
  <p>My JS Fiddle: <a href="https://jsfiddle.net/eeLfog4m/1/" rel="nofollow">https://jsfiddle.net/eeLfog4m/1/</a></p>
  
  <p>Any ideas?</p>
  
  <p>What'd be helpful is a d3js demo without all the bells and whistles. <a href="http://bl.ocks.org/mbostock/4063550" rel="nofollow">http://bl.ocks.org/mbostock/4063550</a> rotates everything around the center. <a href="http://bl.ocks.org/d3noob/8375092" rel="nofollow">http://bl.ocks.org/d3noob/8375092</a> seems to have a lot of extra code for handling redrawing / collapsing of nodes and <a href="https://github.com/mbostock/d3/wiki/Tree-Layout" rel="nofollow">https://github.com/mbostock/d3/wiki/Tree-Layout</a> doesn't have any examples at all.</p>