How do I always keep my d3 line chart rollover text always visible?

Question

I'm using d3 v4. When someone rolls over my line chart, I want to have a box display information about the point in the graph they are rolling over, so I included this

  svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", function() {
      focus.style("display", null);
    })
    .on("mouseout", function() {
      focus.style("display", "none");
    })
    .on("mousemove", mousemove);

  function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.attr("transform", "translate(" + x(d.index_date) + "," + y(d.value) + ")");
    focus.select("text").text(d.value).append("tspan")
      .attr("x", 10).attr("dy", "1.5em").text(formatDate(d.index_date));
    var bbox = focus.select("text").node().getBBox();
    rect.attr("width", bbox.width + 4).attr("height", bbox.height + 4);
  }

The issue is, as you go more and more to the right of my line chart, the information starts to cut off -- https://jsfiddle.net/rgw12x8d/2/ . How can I adjust things so that even if you are rolling over a point at the far right, the information box stays fully visible?

Answer 1

You could do test on d3.mouse(this)[0]) to see if its on the right side of the chart, eg greater than width/2

If so, then base the x in the translate on x(d.index_date) - (bbox.width + 4), which will shift the box to the left of the mouse position

For example:

function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
      i = bisectDate(data, x0, 1),
      d0 = data[i - 1],
      d1 = data[i],
      d = x0 - d0.date > d1.date - x0 ? d1 : d0;


focus.select("text").text(d.value).append("tspan")
  .attr("x", 10).attr("dy", "1.5em").text(d3.timeFormat("%Y-%b-%d")(d.index_date));

var bbox = focus.select("text").node().getBBox();

var rectWidth = bbox.width + 4

rect.attr("width", rectWidth).attr("height", bbox.height + 4)

var translateX = d3.mouse(this)[0] > (width/2)
    ? x(d.index_date) - rectWidth
  : x(d.index_date);

focus.attr("transform", "translate(" + translateX + "," + y(d.value) + ")");

}

You will need to adjust the circle's cx too, which I've not included here