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规则。在您的代码中，tooltip div的作用类似于block元素，因此它使用页面的整个宽度。它还使用了错误的位置规则。对于CSS位置，此资源https://www.w3schools.com/cssref/pr_class_position应该会有所帮助。效果更好。

工具提示位置未更改（D3）

1 个答案: