I am trying to add zooming functionality to my line chart. However, after consulting the documentation and the examples provided by d3.js, my solution still only updates the scaling of the x-axis, without changing the actual displayed data. This is how I generate the chart:

export function drawHypnogram(minX, maxX, data, containerId) {
    // Declare the chart dimensions and margins.
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

    // Declare the x (horizontal position) scale.
    const x = d3.scaleLinear()
        .domain([minX, maxX])
        .range([marginLeft, width - marginRight]);

    // Declare the y (vertical position) scale.
    const y = d3.scalePoint()
        .domain(['4', '3', '2', '1', 'R', 'W'])
        .range([height - marginBottom, marginTop]);

    const line = d3.line()
        .x(d => x(d.x))
        .y(d => y(d.y));

    // Create the SVG container.
    const svg = d3.create("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "hypno");

    // Add the x-axis.
    const xAxis = svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x));

    // Add the y-axis.
    const yAxis = svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`)
        .call(d3.axisLeft(y));

    svg.append("path")
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("stroke-width", 1.5)
        .attr("d", line(data));

    // Append the SVG element.
    const container = d3.select(containerId);
    container.append(() => svg.node());

    // Add zooming
    const zoom = d3.zoom()
        .scaleExtent([1, 8])
        .translateExtent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]])
        .on("zoom", event => {
            const newX = event.transform.rescaleX(x);
            xAxis.call(d3.axisBottom(newX));
            svg.select("path").attr("d", line(data.map(d => ({ x: newX(d.x), y: d.y }))));
        });

    svg.call(zoom);
}

Upon initial loading, the chart looks fine:

However, after zooming in on it, only the x-scale changes:

Furthermore, there are these weird structures in the left bottom corner, as can be seen on the screenshot.
How can I get my data to change according to the x-axis?