javascript - 防止 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 驱动的数据映射而苦苦挣扎的一个问题。我在其他堆栈溢出 channel 中看到了类似于我在下面提供的答案，但现在我似乎找不到它们。我认为您正在寻找的内容类似于 .getBoundingClientRect() .一般的逻辑是循环遍历每个元素，并通过嵌入式循环将其与所有其他元素进行比较，以确定是否存在重叠。您可以使用此算法来确定是否存在重叠，如下所示:http://www.inkfood.com/collision-detection-with-svg/ ;

减去移动文本的实际 block 后，代码可能看起来像这样:

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