How to get D3.js's tidy tree graph from reducing the lateral distance of siblings as depth increases

Question

The problem I am having comes down to the way the Reingold-Tilford tree reduces the separation between siblings as their depth increases. This causes overlap if the nodes and text are not scaled in relation to their depth: enter image description here

This may be a better example: enter image description here

Notice how the separation between siblings is decreasing. I am confident that his has a purpose in keeping the graphs tighter, but I am okay with it consuming more space.

I have gone through the source code for the layout.tree and cannot find where the code defines that the distances will reduce. I am able to increase the distance of all the nodes at all depths, but this is also not exactly the point.

Any suggestions?

Is it! (Yes, yes it is.) Thank you. Post this suggestion below and I will upvote. — Jakub Svec, Apr 24 '13 at 14:58

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

There are a couple solutions in this question: D3 tree vertical separation.

It looks as though https://github.com/mbostock/d3/issues/317 (https://github.com/mbostock/d3/commit/47d7cade203f4f2d066c898a7fe3461b1ca3a06e) may have a fix in the D3 source.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 24 '13 at 17:23

Colin Young

3,018
1
22
46

How to get D3.js's tidy tree graph from reducing the lateral distance of siblings as depth increases

1 Answers1