D3关闭图表的工具提示

这里是fiddle。D3关闭图表的工具提示

divs.on("mousemove", function() { 
    var top = (d3.event.pageY) + "px"; 
    var left = (d3.event.pageX) + "px"; 
    console.log(top + " " + left); 
    tooltip.style("top", top).style("left", left); 
    });

我使用d3.event.pageX和pageY拿到鼠标，但仍犯规重视鼠标的工具提示的当前位置。

来源

2016-02-14 Santosh

我在小提琴中增加了额外的d3.event.pageX - 200，以显示漂移是成比例的。当我从第一个酒吧悬停到最后一个酒吧时，工具提示的位置越来越分散。你可以看到工具提示在左边，然后它向右，当你从第一个div悬停到最后一个div – Santosh

在你的css规则charts.bar div:hover你有一条zoom:150%;线。这会将你的工具提示的位置放大50％，所以越往右移就越糟糕。当你删除它时，工具提示会变得更好。（你也可以试试类似d3.tip（http://bl.ocks.org/Caged/6476579）的东西，而不是滚动自己的。）

来源

2016-02-14 20:10:53 mgraham

我想让工具提示粘在鼠标上。我发现的一个例子是这个http://bl.ocks.org/mbostock/1087001。但是他们也使用了我也在使用的d3.event.pageX和pageY。 – Santosh

我从文档中知道pageX和pageY会返回鼠标的位置。纠正我，如果我错了。 – Santosh

OMG OMG ...它的缩放150％...谢谢@mgraham – Santosh

D3关闭图表的工具提示

回答

相关问题