d3.js: modifyng links in a tree layout

Question

and sorry for my bad english... I'm using the example here: http://bl.ocks.org/mbostock/4339083 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:

    // 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();

but I can't figure out how. I saw the diagonal.source([source]) and the diagonal.target([target]) methods in the API reference. Maybe they can help me, but I don't understand how to use it. Can someone help me?

Answer 1

All you need to do is offset the start and end of the path by the width of the rectangles. What you need to modify is this:

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

Assuming that w is the width of your rectangle, the new code should look something like this.

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x - w]; });