防止Svg文本重叠

Question

我有一个telerik RadHtmlChart，它为图形生成一些svg。

http://jsfiddle.net/L8Gcg/3/

图表目前看起来像这样：

每个圆圈都有一个与之相关的标签。不幸的是，他们倾向于聚在一起并相互重叠。

我想用javascript向上/向下移动文本元素，这样他们就不会重叠，但我不确定最好的方法。

我写了一些代码来循环遍历<text> svg元素，但是我被困在重叠检测/移动部分。

var svg = document.getElementsByTagName("svg")[0];
var svgLabels = svg.getElementsByTagName("text");

for (i = 0; i < svgLabels.length; i++) {
    //Check for overlap, move if necessary
}

有没有办法很好地做到这一点？

Answer 1

这实际上是我正在努力制作d3驱动数据地图的问题。我已经看到类似于我在下面的其他堆栈溢出通道中提供的答案，但是现在我似乎无法找到它们。我认为你所寻找的是类似.getBoundingClientRect()的东西。一般逻辑是遍历每个元素并通过嵌入式循环将其与所有其他元素进行比较，以确定是否存在重叠。您可以使用此算法来确定是否存在重叠，如下所示：http://www.inkfood.com/collision-detection-with-svg/;

以下是代码的外观，减去移动文本的实际块：

for(var i = 0; i < svgLabels.length; i++){
var self = svgLabels[i],
    a = self.getBoundingClientRect();
for(var j = 0; j < svgLabels.length; j++ ){
    var that = 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
       }
  }
}
}