Tooltip for Line Chart with Clip Path in D3

Question

I have put together a D3 line chart and added threshold encoding using clip path / clipping. The only problem I am facing is I am not able to add tooltips to this chart. I want a tooltip when I hover anywhere in the chart and the corresponding y axis value on the chart shows up in the tooltip.

I have added threshold encoding using this 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);

I didn't know how to go about adding a tooltip for this particular chart as there is clip rectangle over the path and the path is broken down into above and below segment to give the colour effects.

Do we have a unified way to add a tooltip to normal path and this one? If yes I would like to know some sources/links I can look at.

Something like this , but not that complicated (without any indicator on the line, just the tooltip)

My CODEPEN LINK

Answer 1

You can add mouseOver handler for the line and translate back the mouse y position to yAxis value using the .invert function of d3 linear scale. Now, you can dynamically add a tooltip text element and set the position, value to it

Here is the updated Codepen link

NOTE: You still need to increase the capture area of the line. This can be done by adding a transparent stroke to the line.

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