如何在数据地图上获得正确的鼠标悬停坐标

Question

我使用的是DataMap，不像地图的普通视图，我把地图倒过来了，当鼠标悬停时，工具提示位置与我鼠标悬停时鼠标的位置不对应

我尝试了不同的代码，在其他代码中获得准确的坐标，但 none 给了我我需要的东西。

在地图反应组件

<Map mapRef= {this.myMap} makeMouseMove={this._onMouseMove} />

第一次尝试

  _onMouseMove = (e) => {
        if (document.querySelector('.hoverinfo')) {
          let mapTooltip = document.querySelector('.datamaps-hoverover');
          let rect = e.target.getBoundingClientRect();
          mapTooltip.style.left = e.clientX - rect.left + 'px';
          mapTooltip.style.top = e.clientY - rect.top + 'px';
       }
     }

第二次尝试

 _onMouseMove = (e) => {
        if (document.querySelector('.hoverinfo')) {
          let mapTooltip = document.querySelector('.datamaps-hoverover');
    mapTooltip.style.left = e.pageX - mapTooltip.offsetLeft+'px';
    mapTooltip.style.left = e.pageY - mapTooltip.offsetTop+'px';
       }
    }

不幸的是，我未能实现我想要实现的目标，如果有处理此 Datamap 问题的经验的人能帮助我提供线索，我将不胜感激。

Answer 1

万一别人有这种问题，我就是这样解决的，显然，左边的值是正确的，我不需要修改它。

        _onMouseMove = (e) => {
           if (document.querySelector('.hoverinfo')){
             let mapTooltip = document.querySelector('.datamaps-hoverover');
             let mapHoverSVG = document.querySelector('svg');
             let point = mapHoverSVG.createSVGPoint();
             point.x = e.clientX;
             point.y = e.clientY;
             let cursor = point.matrixTransform(mapHoverSVG.getScreenCTM().inverse());
             mapTooltip.style.top = (cursor.y + 16) + "px";
             console.log(cursor.y); 
        }
      }

如何在数据地图上获得正确的鼠标悬停坐标

How to get correct MouseHover Coordinates on datamaps

d3.js

reactjs

datamaps