The X-Axis Scale of my Bar Chart Stretches and Contracts when I zoom in and out. Also, the scale overflows out of the set clip-path (No such issues with the Bars). I've tried to get the X-Axis Scale to Re-Scale, but I was unable to do it. Also this is a Dynamic Bar Chart, where its updating at constant intervals, I've resolved many issues it had, I'm just left with this one. Can anyone help me with this?

My Code: https://plnkr.co/edit/qU5DfrAPnkFfB3sT?open=lib%2Fscript.js&preview

Zoom Function:

const zoom = d3.zoom()
zoom.scaleExtent([0.5, Infinity])
    .on("zoom", ({ transform }) => {

        const scaleFactor = transform.k;
        const xOffset = transform.x;
        
        zoomGroup.attr('transform', `translate(${xOffset} 0) scale(${scaleFactor} 1)`);
        xAxisGroup.attr('transform', `translate(${xOffset} 260) scale(${scaleFactor} 1)`);

   
    });
svg.call(zoom);