小编asa*_*sas的帖子

如何避免多系列折线图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
    } 
Run Code Online (Sandbox Code Playgroud)

我的想法是重新计算end. 如果lines[0].getTotalLength()and的减法lines[1].getTotalLength()小于或大于一个值,则更新 end 的值(例如 end = end + …

javascript d3.js

5
推荐指数
1
解决办法
1466
查看次数

标签 统计

d3.js ×1

javascript ×1