具有平移和缩放功能的D3 React框架。鼠标单击以在图形上创建新点

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

任何帮助将不胜感激。