title: Append links to side of rectangles in D3 tree layout
body: <p>I am trying to change each <code>path</code> so that they start from the right side of each rectangle and connect to the left side. Currently they seem to travel "through" the rectangles and have a start/end point somewhere inside the rectangle, not compensating for the size of the <code>rect</code>.</p>
  
  <p>I have tried manipulating this code:</p>
  
  <pre><code>        var diagonal = d3.svg.diagonal()
          .source(function (d) { return { "x": d.source.y, "y": d.source.x }; })
          .target(function (d) { return { "x": d.target.y - 10, "y": d.target.x }; })
          .projection(function (d) { return [d.y + 0, d.x + 0];
        });
  </code></pre>
  
  <p>but that just ends in disaster but I believe the answer lies somewhere over there.</p>
  
  <p>Here is a JSFiddle of the script as it stands <a href="http://jsfiddle.net/ra26wnbb/" rel="nofollow noreferrer">http://jsfiddle.net/ra26wnbb/</a>.</p>
  
  <p><strong>UPDATE</strong> 
  I have viewed <a href="https://stackoverflow.com/questions/27735995/d3-tree-square-node-not-in-desired-position">D3 tree square node not in desired position</a> but I am not sure it will work with my text wrapping.</p>