javascript - 更改 d3.js 中鼠标悬停事件的 X 和 Y 坐标值

Question

我创建了鼠标悬停函数来显示折线图的 x 和 y 坐标。我想在鼠标悬停事件时显示正确的 x 和 y 坐标位置。有人可以帮我找出如何重写工具提示函数以显示正确的 x 和 y 坐标。谢谢。

var tooltip = d3.select("body")
     .data(data)
//    .enter()
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text(function(d){console.log((d.Mass+ ","+ d.Intensity));return (d.Mass+ ","+ d.Intensity);});

折线图的链接位于以下位置。

http://jsbin.com/nipeko/edit?html,css,js,output

Answer 1

怎么样:

.on("mouseover", function(){
   var pos = d3.mouse(this);
   tooltip.text(xScale.invert(pos[0]).toFixed(1) + ' , ' + yScale.invert(pos[1]).toFixed(1));
   return tooltip.style("visibility", "visible");
 })

已更新code .