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關閉圖表的工具提示

回答

相關問題