Actually i'm using d3js to implement a complex graphic chart with zoom behavior. but for few days i'm facing a real problem with zooming line chart using zoom brush selection. The error that i'm facing is that i cannot calculate the good transformation object to get the correct domain in x and y axis that matches with the zoom selection domain.

Below it's my zoom function, and what i expect when the user makes a zoom selection, the new calculated zoom transformation will show the x and y domain that user wants.

    let xScale = graphXAxis?.xScale;//original scale
    let xScaleZoom = graphXAxis?.xScaleZoom;//scale after zoom
    let yScale = graphYAxis?.yScale;//original scale
    let yScaleZoom = graphYAxis?.yScaleZoom;
    
    // Calc distance on Axis-X to use in scale
    let totalX = Math.abs(selection.x2 - selection.x1);
    let totalY = Math.abs(selection.y2 - selection.y1);
    // Get current point [x,y] on canvas
    let originalPoint = [xScaleZoom.invert(selection.x1), 0];
    if (!zone.isTOR()) {
      originalPoint = [xScaleZoom.invert(selection.x1), yScaleZoom.invert(selection.y1)];
    }
    // Result in a zoom of 2
    
    let ratioX = graphWidth / totalX;
    let ratioY = graphHeight / totalY;
    const t = d3.zoomIdentity.scale(Math.min(ratioX, ratioY) * zoomLastTransformForBrush.k);
    // Re-scale axis for the new transformation
    xScaleZoom = t.rescaleX(xScale);
    let transitionX = xScaleZoom(originalPoint[0]) * -1;
    
    let newTransform = null;
    yScaleZoom = t.rescaleY(yScale);
    
    newTransform = d3.zoomIdentity
        .translate(transitionX, yScaleZoom(originalPoint[1]) * -1)
        .scale(t.k)