如何使我的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/ 。我应该如何调整内容，以便即使你在最右边滚动到一个点上，信息框也能完全可见？

- Dave

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，这里我没有包含

- Tom Shanley

---

为什么我需要调整圆的cx？那不就是在线上的点吗？那不会一直可见吗？ - Dave

请看这个例子：https://jsfiddle.net/rgw12x8d/7/。由于g切换了它的x变换，您希望圆的CX位于矩形的右侧（相对于矩形的宽度而不是0），以与G相关。 - Tom Shanley