Как получить правильные координаты MouseHover на картах данных

Question

Я использую DataMap, в отличие от обычного вида карты, я перевернул карту вверх дном, Когда при наведении курсора мыши, расположение всплывающей подсказки не соответствует расположению мыши при наведении мыши на

Я пробовал разные коды, другие, чтобы получить точные координаты, но никто не дает мне то, что мне нужно.

На карту реагирует компонент

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

1-я попытка

  _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';
       }
     }

2-я попытка

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