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

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?