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