D3 React Framework с функциями панорамирования и масштабирования. Щелчок мышью, чтобы создать новую точку на графике

Question

Я использую библиотеку d3 для создания графика рассеяния в приложении React. В частности, я пытаюсь выбрать точки на графике и сделал это, нажав на элементы . Я хотел бы выбрать их, щелкнув в любом месте экрана вместо элемента .

Возникают проблемы с преобразованием координаты щелчка мыши из положения пикселя в положение на диаграмме рассеяния. Успешно зафиксировали пиксельную координату щелчка мыши, но у меня возникли проблемы с преобразованием ее в координату графика, когда график перемещается с помощью панорамирования или масштабирования.

let x = nextProps.mouseCoords.x;
let y = nextProps.mouseCoords.y;

console.log(this.xScale.invert(x) + " " + this.yScale.invert(y));

^ это неверные координаты.

Вот функциональность шкалы.

this.xScale = d3.scaleLinear()
  .domain([0, d3.max(data, ([x, y]) => x)])
  .range([0, width]);
this.yScale = d3.scaleLinear()
  .domain([0, d3.max(data, ([x, y]) => y)])
  .range([0, height]);

if (zoomTransform && zoomType === "detail") {
  this.xScale.domain(zoomTransform.rescaleX(this.xScale).domain());
  this.yScale.domain(zoomTransform.rescaleY(this.yScale).domain());
}

Любая помощь будет принята с благодарностью.