D3：绝对定位工具提示

【问题标题】：D3: Absolute Positioned TooltipD3：绝对定位工具提示
【发布时间】：2018-02-15 12:42:16
【问题描述】：

我在 D3 中有一个图表，鼠标后面有一个绝对定位的工具提示。

以下是相关代码：

.c-tooltip {
  position: absolute;
}

chartBar
  .on("mouseenter", (d, i) => {
    tooltip
      .style("left", event.pageX + "px")
      .style("top", event.pageY-15 + "px");
  })
  .on("mousemove", (d, i) => { 
    tooltip
      .style("left", event.pageX + "px")
      .style("top", event.pageY-15 + "px");
  })

这在大多数情况下效果很好，但如果我想将图表添加到页面上相对定位的元素，它就不行了。因为工具提示的“left”和“top”将相对于该元素进行设置。我测试了 layerX/Y 而不是 pageX/Y，但这并没有得到广泛支持。无论父元素的位置如何，如何创建一个正确定位的工具提示？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我通常提供一个函数作为style方法调用left和top的第二个参数，并根据不同的条件返回不同的位置。

我通常根据图形的 x 比例设置 left，然后尝试在 Math.min 函数中添加约束以防止工具提示离开图形容器。我通常根据我的 y 比例设置 top。

可能是这样的：

chartBar
  .on("mouseenter", (d, i) => {
    tooltip
      .style("left", () => {
        return Math.min(
          xScale(d.month) + (x.bandwidth()),
          parseInt(d3.select('.my-graph-container').style('width')) -
          parseInt(d3.select('.d3-tooltip').style('width'))
        ) + 'px';
     })
     .style("top", () => {
       return y(d.amount) + 'px';
    };
  });

我记得this article 在创建工具提示时非常有帮助，当鼠标进入图表时，它会随着鼠标一起移动。

【讨论】：