How to handle zoom and pan in d3 scaleOrdinal

Viewed 8

I have to create a custom stock chart with variable width x axis for each date. I am using d3.scaleOrdinal for creating the x-axis

const xScale = d3.scaleOrdinal()
    .domain(["16-09-2022", "17-09-2022", "18-09-2022", "19-09-2022", "20-09-2022"])
    .range([0, 260, 500, 750, 900,1010]);

While zooming using geometric approach, the axis got scaled as a whole(i.e ticks, ticklabel, axis line) which I want to work like scaleLinear.

svg.select("#xaxis")
.attr("transform", `translate(${transform.x},${margin.top})scale(${transform.k}) `)

Can anybody suggest how to achieve the desired result with d3 v7 Thanks in advance

0 Answers
Related