工具提示位置不变 (D3)

Question

我正在尝试创建一个工具提示，它会出现在代表数据的点旁边。这是完整的项目：https://codepen.io/imestin/pen/rNOpdae?editors=0110

这是定位工具提示的代码：

var mousemove = function(d) {
    Tooltip
      .html("Time: " + d.Time + "<br>Time in seconds: " + d.Seconds + "<br>Year: " + d.Year + "<br>" + d.Doping)
      .attr("data-year", () => {
        return d.Year;
      })
      .style("left", (d3.mouse(this)[0]+70) + "px")
      .style("top", (d3.mouse(this)[1]) + "px")

无论我做什么，我什至可以在那里写70之类的修复数字，工具提示的位置不会改变。我正在根据 this 教程做工具提示，它在哪里工作。

我不明白我做错了什么。

Answer 1

添加此 css 规则：


.tooltip {
  display: inline;
  position: fixed;
}

您可以改进进行此更改的代码

var mousemove = function(d) {
    Tooltip
      .html("Time: " + d.Time + "<br>Time in seconds: " + d.Seconds + "<br>Year: " + d.Year + "<br>" + d.Doping)
      .attr("data-year", () => {
        return d.Year;
      })
      .style("left", (d3.mouse(this)[0]+ 20) + "px")
      .style("top", (d3.mouse(this)[1]) + "px")
  }

问题不是 d3.js 代码，而是 css 规则。在您的代码中，工具提示 div 像块元素一样工作，因此它使用页面的整个宽度。它还使用错误的位置规则。对于 css 职位，此资源 https://www.w3schools.com/cssref/pr_class_position 应该会有帮助。效果更好。

工具提示位置不变 (D3)

Tooltip position is not changing (D3)

javascript

charts

tooltip

cursor-position

d3.js