图表中的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 ）的方法，而不用自己动手。）