Increasing Gap Between Nodes Of My D3 Tree Layout

As shown in the diagram, I am trying to increase the gap between last nodes on either side of the tree layout as they are overlapping Is there any way to do it in D3?

Solution 1:

Better approach would be to use separation() method. Please look at documentation for details, in principle with that method you define minimum distance between nodes, but in your case you need to restrict making gapos only to some nodes, thats why there is condition inside separation())

var tree = d3.layout.tree()
    .separation(function(a, b) { return ((a.parent == root) && (b.parent == root)) ? 3 : 1; })
    .size([height, width - 160]);

On the following pictures is the tree without the line of code with call to separation(): (I added nodes AA and ZZ to my previous example, and also BB and CC, but these nodes display OK atleast for this case)

... and here with that line:

Live jsfiddles:

here and here

Just for laughs, I further modified the line from " ? 3 : 1; })" to " ? 5 : .6; })", and I got:

Solution 2:

If you add a child to the nodes that you need to move, and than make that child and its correspondent link invisible, that you will have the gap you need. However, I admit this solution is a little quick and dirty.

The problem here that position of the nodes are computed by so-called Reingold-Tilford algorithm automatically within d3.js, and it requires a lot of knowledge to modify the algorithm internally, or use some other algorithm. But some solutions with twaeaking like I described are possible.