Canvas with date axis: k and x do not seem to match

[inctec-leo]

I am trying to implement zoom on canvas. Since I need to reload data, I don't want to transform the canvas, but to set a new axis with the according start and end dates.

Dragging works fine like this, but the x-Axis shift when zooming is off. I am using (x * t_k + t_x) to calculate the x-Axis shift. What am I missing here?

Minimal working example: observablehq.com/d/881735544d5f93f1

canvas = {
  const context = DOM.context2d(width, height);
  context.fillStyle = "white";
  context.fillRect(0, 0, width, height);

  // We use the initial scale to determine the current one by transformation
  const initialScale = d3.scaleTime().domain([timeseries[0].date, timeseries[4].date]).range([0, width]);
  // xScale is the same in the beginning
  let xScale = d3.scaleTime().domain([timeseries[0].date, timeseries[4].date]).range([0, width]);  
  // yScale is not being transformed
  const yScale = d3.scaleLinear().domain([0, 6]).range([0, height]);

  // Draw the line with the current xAxis
  function draw() {
    context.fillRect(0, 0, width, height);
    context.beginPath()
    d3.line().context(context).x(d => {
      return xScale(d.date);}).y(d => yScale(d.value)).curve(d3.curveLinear)(timeseries);
    context.strokeStyle = "#f00"; 
    context.stroke();
  }

  
  d3.select(context.canvas).call(d3.zoom().on("zoom", ({transform}) => {
    // calculate the new axis according to [x * t_k + t_x]
    // and reverse the values to dates
    const start = initialScale.invert(-transform.x);
    const end = initialScale.invert((width * transform.k) - transform.x); 
    // Set the new scale and redraw
    xScale = d3.scaleTime().domain([start, end]).range([0, width]);  
    draw();
  }));

  draw();
  return context.canvas;
};

[Fil]

You can use transform.rescaleX(xScale), I've sent you a suggestion.

[inctec-leo]

Thank you very much, this is working great.
For reference the snippet which will rescale and retrieve the new start/end points:

 d3.select(context.canvas).call(d3.zoom().on("zoom", ({transform}) => {

    const transformedScale = transform.rescaleX(initialScale);

    const start = transformedScale.invert(0);
    const end = transformedScale.invert(width.value);
        
  }));