在d3.js中的鼠標懸停事件上更改X和Y坐標值

Question

我創建了mouseover函數來顯示折線圖的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");
 })

更新了代碼 。