Question

我在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");
  })

这在大多数情况下效果很好，但如果我想将图表添加到页面上相对定位的元素上则不行。因为＆＃34;左边＆＃34; ＆＃34; top＆＃34;将相对于该元素设置工具提示。我测试了layerX / Y而不是pageX / Y，但是没有广泛支持。无论父元素的位置如何，如何创建正确定位的工具提示？

Answer 1

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

我通常根据图表的x-scale设置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在创建工具提示时非常有用，这些工具提示会在鼠标进入图形时随之移动。

D3：绝对定位工具提示

1 个答案: