我正在尝试创建一个工具提示,该提示将显示在代表数据的点旁边。这是完整的项目: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教程进行操作,在该提示中。
我不知道我在做什么错。
添加此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应该会有所帮助。效果更好。