D3 Y Axis in gap of 25 numbers-CodePudding

I have below D3 js code -

const svg = select(svgRef.current);
const { width, height } = wrapperRef.current.getBoundingClientRect();
const stackGenerator = stack().keys(keys);
const layers = stackGenerator(data);

const extent = [0, 100];

const yScale = scaleLinear().domain(extent).range([height, 0]);

const x0Scale = scaleBand()
  .domain(data.map((d) => d.name))
  .range([0, width])
  .padding(0.46);
const x1Scale = scaleBand()
  // .domain(data.map((d) => d.type))
  .rangeRound([0, x0Scale.bandwidth()])
  .padding(0.12);

const xAix = axisBottom(x0Scale);
const yAix = axisLeft(yScale);
svg.select(".x-axis").attr("transform", `translate(0, ${height})`).call(xAix);

svg
  .select(".y-axis")
  .attr("transform", `translate(${0   25}, 0 )`)
  .call(yAix);

I have extent 0 to 100 for Y Axis. I am getting Y-Axis in the group of 10 points - (0,10,20,30,40,50,60,70,80,90,100)

I want to plot it in the gap of 25 - (0,25,50,75,100)

How can I achieve it?

CodePudding user response：

when creating the y-axis you can pass the number of ticks that you want to render

svg
  .select(".y-axis")
  .attr("transform", `translate(${0   25}, 0 )`)
  .call(yAix.ticks(5));

the other way would be using tickValues

svg
  .select(".y-axis")
  .attr("transform", `translate(${0   25}, 0 )`)
  .call(yAix.tickValues([0,25,50,75,100]));