[Solved]-D3 v6: How to zoom stacked bar by selected segment to stretch only selected segment and shrink rest segments (and keep initial chart width)?-d3.js

well, finally i implemented what i want.

result: https://jsfiddle.net/2yqbvrwp/

details: first of all, i decided to remove second scale, bc i need it only in runtime. so, my zoom function is changed to:

d3.zoom().scaleextent([ 1, 10 ])
        // i am not sure if i need the line below since code works same without it
        // i think below is default value

        //.translateextent([ [ 0, 0 ], [ width, height ] ])
        .on("zoom", (event) => {

            const transform = event.transform;

            // the new scale i use for runtime
            // the important part here is clamp method. it prevents from moving
            // segments outside of axis
            const newscalex = transform.rescalex(xscale).clamp(true);

            // so i just applied new scale to current axis
            xaxis.scale(newscalex)
            svg.select("g.axis-x").call(xaxis);

            svg.selectall("rect.segment")
                .attr("x", (d) => newscalex(d[0]))
                .attr("width", (d) => newscalex(d[1]) - newscalex(d[0]));
        })

    svg.call(zoom);

also i removed rect transform from css and added margin left in code. but i think i will return it back since native css is faster.