3

我已经为图表制作了一个工具提示，但光标正在远离工具提示。特别是当我在大显示器上测试它时。我把它放在这里：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;
   }

谢谢

4

2 回答 2

0

您可以使用该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"
于 2013-07-09T09:00:41.037 回答
0

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

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

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

它们适用于填充工具提示的文本并更改其位置。如果您添加/减少“left”和“top”样式的值，您将得到您想要的。

结果：工作示例

div
    .text( hours + ":" + minutes + suffix + ", " + d3.event.pageY)
    .style("left", (d3.event.pageX - 50 ) + "px")
    .style("top", (d3.event.pageY - 30 ) + "px");
于 2013-07-09T08:24:11.773 回答