防止 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
       }
  }
}
}