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

时间:2015-07-31 18:38:51

标签: javascript jquery d3.js

我创建了鼠标悬停功能,以显示我的折线图的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

1 个答案:

答案 0 :(得分: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