如何始终保持我的 d3 折线图翻转文本始终可见？

Question

我正在使用 d3 v4。当有人在我的折线图上滚动时，我希望有一个框显示有关他们在图表中滚动的点的信息，所以我包括了这个

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

问题是，随着您越来越靠近我的折线图的右侧，信息开始中断 -- https://jsfiddle.net/rgw12x8d/2/。我该如何调整，以便即使您滚动到最右侧的某个点，信息框仍保持完全可见？

Answer 1

您可以在 d3.mouse(this)[0]) 上做测试，看看它是否在图表的右侧，例如大于 width/2

如果是这样，则将翻译中的 x 基于 x(d.index_date) - (bbox.width + 4)，这会将框移动到鼠标位置的左侧

例如：

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

}

你还需要调整圆的 cx，我没有包括在这里

如何始终保持我的 d3 折线图翻转文本始终可见？

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

css

d3.js

svg

mouseover