D3.js工具提示定位

Question

所以我正在尝试在折线图上创建工具提示。我已经完成了这个

var tooltipDiv = d3.select('body')
    .append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0);

在鼠标悬停功能中，我这样做了 -

tooltipDiv.transition()
    .duration(200)
    .style("opacity",0.9);
tooltipDiv.html(
        "<div class='tooltip-val'>" + d[model.get('lineTitle')] + "</div>" + 
        "<div class='tooltip-date'>" + date + "</div>"
    )
    .style("left", d3.event.pageX + "px")     
    .style("top", d3.event.pageY + "px"); 

但是这会使div只出现在topleft中，而不会出现在鼠标事件发生的位置。

为什么？