d3 : Y Axis intervals not getting set by ticks-CodePudding

I want to set Y Axis by 0-100 percent in the intervals of 0-25-50-75-100.

For that I am setting ticks to 4.

But I can see Y axis in the intervals of 0-20-40-60-80-100

How can I set Y axis in the intervals of 0-25-50-75-100 ??

I have below code -

  const extent=[0,100];
  const yScale = scaleLinear().domain(extent).range([height, 0]);
  
  const x0Scale = scaleBand()
    .domain(data.map((d) => d.month))
    .range([0, width])
    .padding(0.46);
  const x1Scale = scaleBand()
   // .domain(data.map((d) => d.type))
    .rangeRound([0, x0Scale.bandwidth()])
    .padding(0.22);

  const xAix = axisBottom(x0Scale);
  const yAix = axisLeft(yScale);
  

  svg
  .select(".x-axis")
  .attr("transform", `translate(${xMargin}, ${height   yMargin})`)
  .style("font-weight", "bold")
  .style("font-size", "0.700rem")
  .call(xAix);
  
  svg
    .select(".y-axis")
    .attr("transform", `translate(${0   xMargin}, ${yMargin} )`)   
    .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
    .call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d   "%"}));

CodePudding user response：

d3 takes priority for some of the tick functions , you can do force tick Values by tickValues(d3.range(minValue, maxValue, noOfSteps)); . In your case

yAix.tickSize(-width).tickValues(d3.range(0,100,4).tickFormat(function(d){return d "%"})

or use tickValues(d3.range(d3.min(dataarray),d3.max(dataarray),noOfticks))

CodePudding user response：

Use tickValues instead of ticks.

svg
  .select(".y-axis")
  .attr("transform", `translate(${0   xMargin}, ${yMargin} )`)   
  .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
  .call(yAix
    .ticksValues([0, 25, 50, 75, 100])
    .tickSize(-width)
    .tickFormat(function(d){return d   "%"}));

ticks is used as a hint only - d3 might display a few more or less ticks, depending on the scale and the available screen space.

tickValues allows you to select the exact values for which to display ticks.