d3.js - D3 show text for nodes when zoomed -


the number of nodes in d3 graph large. built zoom mechanism in graph. problem is, cannot display text each nodes since overlap each other. when zoom in nodes, space enough display texts.

enter image description here

so how show texts when space enough show of them without overlapping?

i have had same problem in past. unfortunately optimal label placement not easy problem. mitigate overlap effects 1 option use restricted force layout label placement. can try using callouts allow labels move farther away nodes.

in past have implemented sort of greedy collision detection based algorithm goes like:

sort labels in decreasing priority each label in list // important first     if label not overlap placed labels         place label , add collision data structure (e.g. quad tree)     else         hide label 

obviously have non-optimal cases , can slow if have lot of animations going on. when have option zoom in see more label , if absolute number of labels not high works quite well. there number of obvious ways speed restricting testing labels within view (but need update on pan).

you may find helpful suggestions here including implementation of collision detection.


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -