title: D3 Tree Layout Separation Between Nodes using NodeSize
body: <p>Right now I am trying to separate my rectangle nodes because they overlap as shown in the picture below:</p>
  
  <p><img src="https://i.stack.imgur.com/OF3uN.png" alt="enter image description here"></p>
  
  <p>I took a look and found out that D3 offers a <a href="https://github.com/mbostock/d3/wiki/Tree-Layout#wiki-nodeSize" rel="noreferrer">nodeSize</a> and <a href="https://github.com/mbostock/d3/wiki/Tree-Layout#wiki-separation" rel="noreferrer">separation</a> method but for some reason it did not work.</p>
  
  <p>I found this <a href="http://javaguirre.net/2013/01/30/fixing-nodes-overlapping-d3-tree/" rel="noreferrer">blog post</a> talking about the issue but he says</p>
  
  <blockquote>
    <p>The size property doesn’t exist in nodes, so it will be whatever property you want to control the size of them.</p>
  </blockquote>
  
  <p>but clearly there is a nodeSize method so I feel like I am simply using the method incorrectly and/or the blog post is out-of-date. I want to shape my nodes to be the size of the rectangle and space them out evenly so they do not overlap each other. Does anyone know how to use the methods properly? The documentation about these methods isn't explained very well and it isn't yielding any difference. I also couldn't find many examples where people changed the nodeSize of trees or needed separation for rectangular objects (there were some examples regarding circular ones but I feel that's too different...)</p>
  
  <p>Here is the relevant code. I will try to prepare a JSFiddle.</p>
  
  <pre><code>var margin = {top: 20, right: 120, bottom: 20, left: 120},
      height = 960 - margin.right - margin.left,
      width = 800 - margin.top - margin.bottom,
      rectW = 70;
      rectH = 30;
      //bbox = NaN,
      maxTextLength = 0;
  
  var i = 0,
      duration = 750,
      root;
  
  
  //paths from each node drawn initially here
  //changed to d.x, d.y
  var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.x+rectW/2, d.y+rectH/2];
      //.projection(function(d) { return [d.x+bbox.getBBox().width/2, d.y+bbox.getBBox().height/2]; 
  });
  
  var tree = d3.layout.tree()
      .nodeSize([30,70])
      .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); })
      .size([width, height]);
  
  var svg = d3.select("body")
              .append("svg")
                .attr("height","100%").attr("width","100%")
                .call(d3.behavior.zoom().on("zoom", redraw))
                .append("g")
                  .attr("transform", "translate(" + margin.top + "," + margin.left + ")");
  </code></pre>