Javascript D3中具有剪辑路径的折线图的工具提示

并使用剪辑路径/剪辑添加了阈值编码。我面临的唯一问题是无法将工具提示添加到此图表。当我将鼠标悬停在图表中的任何位置，图表上相应的y轴值显示在工具提示中时，我需要工具提示

我已经使用这个添加了阈值编码

我不知道如何为这个特殊的图表添加一个工具提示，因为路径上有一个剪辑矩形，路径被分解为上面和下面的部分，以提供颜色效果

我们是否有一个统一的方法来向法线路径和此路径添加工具提示？如果是，我想知道一些我可以查看的来源/链接

类似，但没有那么复杂（行上没有任何指示器，只有工具提示）

---

您可以为该行添加鼠标悬停处理程序，并使用d3线性刻度的.invert函数将鼠标y位置转换回yAxis值。现在，您可以动态添加工具提示文本元素并为其设置位置、值

以下是最新的

注意：您仍然需要增加线的捕获区域。这可以通过向直线添加透明笔划来完成

  svg.selectAll(".line")
    .data(["above", "below"])
    .enter().append("path")
    .attr("class", function(d) { return "line " + d; })
    .attr("clip-path", function(d) { return "url(#clip-" + d + ")"; })
    .datum(data)
    .attr("d", line)
  .on("mouseover", function() {
    var mousePos = d3.mouse(this);
    var yAxisValue = _config.yScale.invert(mousePos[1]);
    svg.selectAll(".tooltip").data([mousePos])
      .enter().append("text")
      .classed("tooltip", true)
      .attr("x", function(d) { return d[0]})
      .attr("y", function(d) { return d[1]})
      .text(yAxisValue); 
   })
   .on("mouseout", function() {
      svg.selectAll(".tooltip").data([]).exit().remove();
   });

---

太棒了，非常感谢，我会考虑增加捕获面积，你有什么建议吗？我是否应该在附加路径时添加一个笔划宽度更大的透明笔划？谢谢。我想要一个帮助。检查此示例，并告诉我在图表中的任何位置移动鼠标时如何执行此工具提示功能？

  svg.selectAll(".line")
    .data(["above", "below"])
    .enter().append("path")
    .attr("class", function(d) { return "line " + d; })
    .attr("clip-path", function(d) { return "url(#clip-" + d + ")"; })
    .datum(data)
    .attr("d", line)
  .on("mouseover", function() {
    var mousePos = d3.mouse(this);
    var yAxisValue = _config.yScale.invert(mousePos[1]);
    svg.selectAll(".tooltip").data([mousePos])
      .enter().append("text")
      .classed("tooltip", true)
      .attr("x", function(d) { return d[0]})
      .attr("y", function(d) { return d[1]})
      .text(yAxisValue); 
   })
   .on("mouseout", function() {
      svg.selectAll(".tooltip").data([]).exit().remove();
   });