工具提示未相对于 cursor 定位

Question

I have 2 pages that use Tooltip. One does what I expect (the tooltip moves relative to the cursor) but the other doesn't. The d3.event.pageY and d3.event.pageX both are what I expect in the console.log but the tooltips in the html do not move (as if d3.event.pageY is zero).

Any idea what can be the cause?

   .on ("mouseover" , function ( d ) { 
     if (d.properties.rate == null) { d.properties.rate = 0} else {console.log ("d3.event.pageY - tooltipTop ", d3.event.pageY - tooltipTop)};
        div.transition () 
        .duration ( 200 ) 
        .style ( "opacity" , 1 ); 
        div.html ("<p>" + d.properties.PHU_NAME_E + "</p><p>" + formatInteger(d.properties.rate) + " cases per million</p>") 
        .style ( "left" , ( d3.event.pageX - tooltipLeft) + "px" ) 
        .style ( "top" , ( d3.event.pageY - tooltipTop ) + "px" ); 
        }) // end of mouseover
    .on ( "mouseout" , function ( d ) { 
        div.transition () 
        .duration ( 500 ) 
        .style ( "opacity" , 0 ); 
        }); // end of mouseout;

Complete Code: https://jsfiddle.net/PatriciaW/q6da7zj9/2/

Answer 1

Not a problem any more: I have done something that has fixed this (using both d3.mouse(this) and d3.event.pageX). I have no idea what it was.