工具提示位置未更改 (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，工具提示的位置不会改变。 我正在根据本教程执行工具提示，它正在工作。

我不明白我做错了什么。

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 应该会有所帮助。 它效果更好。