Javascript d3 Y轴鼠标上方多折线图的工具提示栏（提供代码）

我正在尝试在鼠标上方为多折线图实现一个工具提示。 我遵循了中的代码，并尝试对其进行更改，以便看到给定悬停Y值的行的X值，但我无法使其工作

我的尝试可以在下面找到

在我的实际实现中，我使用Typescript编写，函数“getTotalLength（）”和“getPointAtLength（）”表示它们在属性元素上不存在。
另外，如果你能在一行中添加一个文本框，其中有悬停的Y值，这将对我有很大帮助

---

谢谢

所以经过仔细检查，我已经纠正了几个错误

您的数据行路径未分配类，因此，当您像这样附加它们时，需要将

dataLine

的类分配给它们：

正如上面评论中指出的，如果您打算使用箭头函数，请停止使用箭头函数。一旦你这样做，你的

d3.mouse（this）

开始工作

您遵循的示例具有从左到右的路径，而您的示例是从上到下的路径。这需要在坐标方面进行几次更改，以使鼠标悬停线和圆圈与其附近的文本值正确对齐。正确的代码如下：

.on（“mousemove”，function（））{
//@ts忽略
var mouse=d3.mouse（this）；
d3.选择（“.鼠标线”）.attr（“d”，（）=>{
var d=“M”+绘图宽度+”，“+鼠标[1]；
d+=“+0+”，“+鼠标[1]；
返回d；
});
d3.选择全部（“.鼠标每行”）.attr（“转换”），函数（d，i）{
var yDepth=y.invert（鼠标[1]）；
var-bisect=d3.平分线（d=>d.depth）。右；
var idy=二等分（d.值，yDepth）；
var初始值=0；
var end=lines[i].getTotalLength（）；
var目标=null；
while（true）{
目标=数学楼层（（开始+结束）/2）；
var pos=行[i]。getPointAtLength（目标）；
如果(
（目标===结束| |目标===开始）&&
位置y！==鼠标[1]
) {
打破
}
如果（位置y>鼠标[1]）{
结束=目标；
}else if（位置y<鼠标[1]）{
开始=目标；
}否则{
打破
}
}
d3.选择（本）
.选择（“文本”）
.文本（x.invert（pos.x）.toFixed（2））；
返回“translate（“+pos.x+”，“+mouse[1]+”）”；
});
});

---

.

您在箭头函数中使用了

此

。但是箭头函数没有绑定到此，谢谢，我会记住这一点

    svg
      .selectAll(".dataLine")
      .data(nestedData)
      .enter()
      .append("path")
      .attr("fill", "none")
      .attr("class", "dataLine")
      .attr("stroke", d => itemMap(d.key).color)
      .attr("stroke-width", d => itemMap(d.key).lineWeight)
      .attr("d", d =>
        d3
          .line()
          .x(d => x(d.xvalue))
          .y(d => y(d.yvalue))(d.values)
      );

      .on("mousemove", function() {
        //@ts-ignore
        var mouse = d3.mouse(this);
        d3.select(".mouse-line").attr("d", () => {
          var d = "M" + plotWidth + "," + mouse[1];
          d += " " + 0 + "," + mouse[1];
          return d;
        });

        d3.selectAll(".mouse-per-line").attr("transform", function(d, i) {
          var yDepth = y.invert(mouse[1]);
          var bisect = d3.bisector(d => d.depth).right;
          var idy = bisect(d.values, yDepth);

          var beginning = 0;
          var end = lines[i].getTotalLength();
          var target = null;

          while (true) {
            target = Math.floor((beginning + end) / 2);
            var pos = lines[i].getPointAtLength(target);
            if (
              (target === end || target === beginning) &&
              pos.y !== mouse[1]
            ) {
              break;
            }
            if (pos.y > mouse[1]) {
              end = target;
            } else if (pos.y < mouse[1]) {
              beginning = target;
            } else {
              break;
            }
          }
          d3.select(this)
            .select("text")
            .text(x.invert(pos.x).toFixed(2));

          return "translate(" + pos.x + "," + mouse[1] + ")";
        });
      });