光标远离javascript图形的工具提示

cursor stays faraway from the tooltip of javascript graph

本文关键字：工具提示 图形 javascript 远离 光标      更新时间：2023-09-26

我为一个图形制作了一个工具提示，但光标正在远离工具提示。尤其是当我在大显示器上测试时。我把它放在这里：http://jsfiddle.net/u4daX/15/为了看到问题，你应该把结果窗口调大，这样你就可以看到工具提示与光标指向的位置保持距离。你能给我一些提示吗？你认为我应该在这部分做改动吗？

   .line1 {
    fill: blue;
    stroke: blue;
    stroke-width: 1px;
    opacity: 0.7;
   }
   .line2 {
    fill: green;
    stroke: green;
    stroke-width: 1px;
    opacity: 0.7;
   }
   .line3 {
    fill: orange;
    stroke: orange;
    stroke-width: 1px;
    opacity: 0.7;
   }

感谢

当你移动光标时，工具提示的位置会计数，这意味着你必须查看JS的来源来更改它，而不是CSS。

在您的JavaScript代码源中，您有以下几行代码：

div.text( hours + ":" + minutes + suffix + ", " + d3.event.pageY)
    .style("left", (d3.event.pageX ) + "px")
    .style("top", (d3.event.pageY ) + "px");

它们使用文本填充工具提示并更改其位置。如果你增加/减少"左"answers"上"样式的值，你就会得到你想要的。

结果：工作示例

div
    .text( hours + ":" + minutes + suffix + ", " + d3.event.pageY)
    .style("left", (d3.event.pageX - 50 ) + "px")
    .style("top", (d3.event.pageY - 30 ) + "px");

您可以使用d3.mouse函数来获取鼠标坐标，例如：

div
    .text( hours + ":" + minutes + suffix + ", " + d3.event.pageY)
    .style("left", d3.mouse(this)[0] + "px")
    .style("top", d3.mouse(this)[1] + "px");

此外，您可能希望通过在每个值上添加偏移量来调整位置，例如：

d3.mouse(this)[0] + 20 + "px"
d3.mouse(this)[1] + 30 + "px"
相关文章：