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.
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
Post a Comment