Javascript 如何避免多系列折线图d3.js的工具提示重叠

我已经在多系列折线图上创建了工具提示。如果我将鼠标悬停在最后一个日期上，如图所示：

工具提示重叠。我想要的是，当工具提示重叠时，将它们中的任何一个移动得更高或更低。我试图通过更改下面的代码来实现这一点

   var beginning = 0,
        end = lines[i].getTotalLength(),
        target = null;
    //console.log(lines[i])             
    //console.log(end)
    while (true){
      target = Math.floor((beginning + end) / 2);
      pos = lines[i].getPointAtLength(target);
      if ((target === end || target === beginning) && pos.x !== mouse[0]) {
          break;
      }
      console.log(pos)
      if (pos.x > mouse[0])      end = target;
      else if (pos.x < mouse[0]) beginning = target;
      else break; //position found
    } 

var开始=0，
end=行[i]。getTotalLength（），
target=null；
//console.log（行[i]）
//console.log（结束）
while（true）{
目标=数学楼层（（开始+结束）/2）；
pos=行[i]。getPointAtLength（目标）；
如果（（目标==结束| |目标==开始）&&pos.x！==鼠标[0]）{
打破
}
控制台日志（pos）
如果（pos.x>鼠标[0]）结束=目标；
否则，如果（位置x<鼠标[0]）开始=目标；
else break；//找到位置
} 

我的想法是重新计算

结尾

。如果

行[0].getTotalLength（）

和

行[1].getTotalLength（）

的减法小于或大于一个值，则更新end的值（例如end=end+20）。但我在这里没有得到代码

有人知道怎么做吗？或者有没有更简单的方法避免工具提示重叠？

请参见此处的更改：

基本上，工具提示需要按y位置排序，然后我们确保按该排序顺序相邻的工具提示之间的距离最小（我选择了15px）。然后，到先前计算的y位置的偏移将添加到工具提示文本中。我也给文本涂上颜色，使它们更容易分辨哪个是哪个

    var ypos = [];

    d3.selectAll(".mouse-per-line")
      .attr("transform", function(d, i) {
        // same code as before
        // ...
          // add position to an array
          ypos.push ({ind: i, y: pos.y, off: 0});

        return "translate(" + mouse[0] + "," + pos.y +")";
      })
      // sort this array by y positions, and make sure each is at least 15 pixels separated
      // from the last, calculate an offset from their current y value,
      // then resort by index
      .call(function(sel) {
        ypos.sort (function(a,b) { return a.y - b.y; });
        ypos.forEach (function(p,i) {
            if (i > 0) {
            var last = ypos[i-1].y;
           ypos[i].off = Math.max (0, (last + 15) - ypos[i].y);
            ypos[i].y += ypos[i].off;
          }
        })
        ypos.sort (function(a,b) { return a.ind - b.ind; });
      })
      // Use the offset to move the tip text from it's g element
      // don't want to move the circle too
      .select("text")
        .attr("transform", function(d,i) {
            return "translate (10,"+(3+ypos[i].off)+")";
        }
      ;