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

Question

I have put together a D3 line chart 并添加了使用剪辑路径/剪辑的阈值编码。我面临的唯一问题是我无法向该图表添加工具提示。当我将鼠标悬停在图表中的任何位置时，我想要一个工具提示，并且图表上相应的 y 轴值显示在工具提示中。

我使用这个 example by Mike Bostock 添加了阈值编码。

 var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return _config.xScale(d.vtc); })
    .y(function(d) { return _config.yScale(d.values); });

          svg.append("clipPath")
      .attr("id", "clip-above")
    .append("rect")
      .attr("width", _config.width)
      .attr("height", _config.yScale(55));

  svg.append("clipPath")
      .attr("id", "clip-below")
    .append("rect")
      .attr("y", _config.yScale(55))
      .attr("width", _config.width)
      .attr("height", _config.height - _config.yScale(55));


  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);

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

我们有统一的方法来向普通路径添加工具提示吗？如果是我想知道一些sources/links我可以看看

有点像 this，但没那么复杂（线上没有任何指示器，只有工具提示）

My CODEPEN LINK

Answer 1

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

这是更新后的 Codepen link

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

  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();
   });

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

Tooltip for Line Chart with Clip Path in D3

javascript

d3.js

charts

data-visualization

linechart