search

vasturiano / force-graph

Force-directed graph rendered on HTML5 canvas
https://vasturiano.github.io/force-graph/example/directional-links-particles/
MIT License
1.54k stars 246 forks source link

top down tree text overlap #119

Open ravik3592 opened 4 years ago

ravik3592 commented 4 years ago

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 commented 3 years ago

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

vasturiano commented 3 years ago

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