top down tree text overlap

[ravik3592]

in Dag mode, top down tree, im facing text overlap issue, is there anyway to increase node spacing based on text size. i achieved this using svg but im sure abt canvas. option to increase node spacing or text rotation to view text clearly will be useful

[karthik-krishna]

@vasturiano , facing the same issue, is there anyway to increase node spacing based on text size ?

[vasturiano]

Possibly one way to solve this is to add a bounding box collision force to your text nodes using a d3-force plugin like d3-bboxCollide.

The part that is non-trivial is to extract bounding box coordinates per node since the size may vary depending on the text content, font size, etc. That could be done using canvas own measureText. You can see it being used in text nodes example here: https://github.com/vasturiano/force-graph/blob/6a9b1e7cd46e5686b4d98d060591174239fd3330/example/text-nodes/index.html#L20-L23