javascript - Prevent Svg Text Overlap -



javascript - Prevent Svg Text Overlap -

i have telerik radhtmlchart generates svg graph.

http://jsfiddle.net/l8gcg/3/

the graph looks this:

each circle has label associated it. unfortunately tend bunch , overlap each other.

i'd move text elements up/down javascript don't overlap i'm not sure best way go it.

i wrote code loop through <text> svg elements stuck on overlap detection/moving part.

var svg = document.getelementsbytagname("svg")[0]; var svglabels = svg.getelementsbytagname("text"); (i = 0; < svglabels.length; i++) { //check overlap, move if necessary }

is there way nicely?

this question struggling making d3 driven info maps. i've seen answers similar i'm providing below in other stack overflow channels right can't seem find them. think looking .getboundingclientrect(). general logic loop through each element , compare others through embedded loop determine if there overlap. can utilize algorithm determine if there overlap in here: http://www.inkfood.com/collision-detection-with-svg/;

here's code might minus actual block moves text:

for(var = 0; < svglabels.length; i++){ var self = svglabels[i], = self.getboundingclientrect(); for(var j = 0; j < svglabels.length; j++ ){ var = svglabels[j]; if(self != that){ var b = that.getboundingclientrect(); if( !( b.left > a.right || b.right < a.left || b.top > a.bottom || b.bottom < a.top ) ){ // move text } } } }

javascript svg radhtmlchart

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

c# - Create a Notification Object (Email or Page) At Run Time -- Dependency Injection or Factory -

Set Up Of Common Name Of SSL Certificate To Protect Plesk Panel -