Wsrtjtyk

I am using a the d3 library to create a scatterplot graph in a React application. Specifically I am trying to select points on the graph and have done so by clicking the <Circle> elements. I would like to select them by clicking anywhere on the screen instead of on the <Circle> element.

Having trouble converting the mouse click coordinate from the pixel position to the position on the scatterplot. Have successfully captured the mouse click pixel coordinate but am having trouble converting it to the graph coordinate when the graph is moved via panning or zooming.

let x = nextProps.mouseCoords.x;

let y = nextProps.mouseCoords.y;



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

^this logs coordinates that are not correct.

Here is the scale functionality.

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

}

Any help would be greatly appreciated.