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

Question

我正在使用DataMap，与地图的普通视图不同，我将地图倒置，当鼠标悬停时，工具提示位置与鼠标悬停时的位置不对应

我尝试了不同的代码，以获取准确的坐标，但没有一个能满足我的需求。

在地图反应组件中

<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); 
        }
      }