Accepted answer

well, finally i implemented what i want.


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

                .attr("x", (d) => newscalex(d[0]))
                .attr("width", (d) => newscalex(d[1]) - newscalex(d[0]));

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.

Related Query

More Query from same tag