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.

enter image description here


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;                  

Related Query

More Query from same tag