D3中具有剪切路徑的折線圖的工具提示

Question

我整理了一個D3折線圖，並使用剪輯路徑/剪輯添加了閾值編碼。 我面臨的唯一問題是我無法在此圖表中添加工具提示。 當我將鼠標懸停在圖表中的任何位置並且圖表上相應的y軸值顯示在工具提示中時，我需要工具提示。

我使用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);

我不知道如何為該特定圖表添加工具提示，因為路徑上方有剪輯矩形，並且該路徑被細分為上下分段以提供色彩效果。

我們是否有統一的方法將工具提示添加到正常路徑，而這一方法呢？ 如果是，我想了解一些我可以查看的資源/鏈接。

像這樣的東西，但並不復雜（沒有任何指示符，只是工具提示）

我的CODEPEN鏈接

Answer 1

您可以為該行添加mouseOver處理程序，並使用d3線性比例的.invert函數將鼠標的y位置轉換回yAxis值。 現在，您可以動態添加工具提示文本元素並為其設置位置，值

這是更新的Codepen鏈接

注意：您仍然需要增加該行的捕獲區域。 這可以通過向線條添加透明筆觸來完成。

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