d3js Tree Layout vertical distance between text of circle overlaps

Question

I created this fiddle for a simple tree visualisation with d3js. It works fine. However, when the tree gets really big I have the problem than texts next to the nodes tend to overlap. So I need to somehow set a vertical distance. How can I achieve this? The following image shows what I mean:

I tried to add it with the separation function, but this is I guess only changes it horizontally.

var tree = d3.layout.tree().nodeSize([1, nodeHeight])
       .separation(function(a, b) {
           var height = a.height + b.width,
               distance = height / 2 + 50; 
               return distance;
       }),
nodes = tree.nodes(data),
links = tree.links(nodes);

Possible duplication https://stackoverflow.com/questions/13032722/d3-tree-vertical-separation, could you also provide an example of the tree data that causes the error in your jsfiddle please — Alessi 42, May 28 '17 at 20:41

score 0 · Answer 1 · answered Oct 03 '17 at 11:57

I think the sibling nodes are not overlapping but the cousins. To handle your problem, you need to see how tree.separation() works.

In one of my projects. I did this.

var tree = d3.layout.tree();
tree.nodeSize(/*some stuff here*/)
.separation(function(a, b) {
        return (a.parent == b.parent ? 1 : 1.5);
    });

return (a.parent == b.parent ? 1 : 1.5) basically is saying that if nodes have same parent or are siblings, then separation between them is none and if they don't have the same parents, they are considered cousins, and therefore computed distance between them is 50% the height of your node(which you defined in nodeSize).

I'm not good at explaining stuff like professionals do but definitely check out separation method and keep in mind it handles distance between cousins nodes.

score 0 · Answer 2 · answered Dec 14 '18 at 20:59

I had a similar issue, and none of the answers to related questions that suggested using nodeSize() or separation() appeared to change the layout much (or, in ways that I was expecting).

In the end, I made the following simple scaling change in the update() function, and it fixed the issues with vertically overlapping nodes. It's not terribly elegant, but has the virtue of being simple:

nodes.forEach((d) => {
  // spread out the vertical axis (if this isn't here, lines tend to overlap on denser graphs)
  d.x = d.x * 2;                  
});

d3js Tree Layout vertical distance between text of circle overlaps

2 Answers2