getNearestPosition() Accuracy Falls Off Based on Graph Width

[elsonel]

I'm encountering what seems to be a strange bug.

I created a simple line graph that is traceable with the mouse cursor using the getNearestPosition() function. This graph is approximately 2000 pixels wide and works as follows:

small_graph.mp4

This is the same graph but with more data (approximately 7000 pixels wide). The accuracy falls off drastically, and the direction that point on curve moves seems to be dependent on whether my cursor is above or below the line.

graph.large.mp4

I have confirmed that my mouse position is correct across both of these graphs.

For reference, I'm using a normalized dataset.

const xScale = d3.scaleTime().domain([startDate, endDate]).range([0, 1]);
const yScale = d3.scaleLinear().domain([minValue, maxValue]).range([1, 0]);

const curveInterpolator = new CurveInterpolator(
  data.map((point) => [xScale(point.x), yScale(point.y)]),
);

This is the function used to calculate the location of the point on curve:

const onMouseMove = (clientX: number, clientY: number) => {
  const dimensions = canvasElement.getBoundingClientRect();
  const top = dimensions.top;
  const left = dimensions.left;
  const height = dimensions.height;
  const width = dimensions.width;
  
  // calculate mouse position relative to the element's top left corner
  const relativeX = clientX - left;
  const relativeY = clientY - top;
  
  // normalize relative mouse position
  const normalizedX = clamp(relativeX / width, 0, 1);
  const normalizedY = clamp(relativeY / height, 0, 1);
  
  // get nearest point on curve
  const { point } = ProcessedData.curveInterpolator.getNearestPosition([
    normalizedX,
    normalizedY,
  ]);
  
  const posX = point[0] * width;
  const posY = point[1] * height;
  
  squareElement.style.cssText = `
    transform: translate(${posX}px, ${posY}px);
  `;
},

[kjerandp]

It would be helpful if you could reproduce this issue using something like ObservableHQ or Codepen.

It seems like the data going into the curve interpolator ranges from 1..0 on the Y-axis, while the (normalized) mouse coordinates would be in the range 0..1?