title: d3.js: modifyng links in a tree layout
body: <p>and sorry for my bad english...
  I'm using the example here: <a href="http://bl.ocks.org/mbostock/4339083" rel="nofollow">http://bl.ocks.org/mbostock/4339083</a>
  to build a tree diagram, but I changed the circles in the root's children with a rect.
  Now the diagram is a bit messy because the I see the links go through the rect.
  I want these links start and stop to the sides of the rect. 
  I think I have to modify the code in the diagonal path generator:</p>
  
  <pre><code>    // Update the links…
  var nodeLinks = tree.links(nodes);
  var link = vis.selectAll("path.link")
    .data(nodeLinks, function(d) { return d.target.id; });
  
  // Enter any new links at the parent's previous position.
  link.enter().insert("svg:path", "g")
    .attr("class", "link")
    .attr("d", function(d) { 
      var o = {x: source.x0, y: source.y0};
      return diagonal({source: o, target: o});
  })
  .transition()
    .duration(duration)
    .attr("d", diagonal);
  
  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", diagonal);
  
  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
      var o = {x: source.x, y: source.y};
      return diagonal({source: o, target: o});
    })
    .remove();
  </code></pre>
  
  <p>but I can't figure out how.
  I saw the <code>diagonal.source([source])</code> and
  the <code>diagonal.target([target])</code> methods in the API reference.
  Maybe they can help me, but I don't understand how to use it.
  Can someone help me?</p>