Quiero configurar el eje Y en 0-100 por ciento en los intervalos de 0-25-50-75-100 .
Para eso estoy configurando ticks en 4.
Pero puedo ver el eje Y en los intervalos de 0-20-40-60-80-100
¿Cómo puedo configurar el eje Y en los intervalos de 0-25-50-75-100?
Tengo el siguiente código -
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 + "%"}));Use tickValues en lugar de 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 se usa solo como una sugerencia: d3 puede mostrar algunos ticks más o menos, según la escala y el espacio de pantalla disponible.
tickValues le permite seleccionar los valores exactos para los que mostrar los ticks.
d3 tiene prioridad para algunas de las funciones de tick, puede forzar los valores de tick mediante tickValues(d3.range(minValue, maxValue, noOfSteps)); . En tu caso
yAix.tickSize(-width).tickValues(d3.range(0,100,4).tickFormat(function(d){return d + "%"})
o utilice tickValues(d3.range(d3.min(dataarray),d3.max(dataarray),noOfticks))