圖表中的D3工具提示

Question

這是小提琴 。

  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來獲取鼠標的當前位置， 但工具提示仍未附加到鼠標。

Answer 1

在您的css規則charts.bar div:hover您有一個zoom:150%; 線。 這會使工具提示的位置膨脹50％，因此，如果您向右移動，它會變得更糟； 當您刪除它時，工具提示會變得更好。 （您也可以嘗試使用類似d3.tip（ http://bl.ocks.org/Caged/6476579 ）的方法，而不用自己動手。）