Tengo debajo del código D3 js -
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); Tengo una extensión de 0 a 100 para el eje Y. Obtengo el eje Y en el grupo de 10 puntos - (0,10,20,30,40,50,60,70,80,90,100)
Quiero trazarlo en la brecha de 25 - (0,25,50,75,100)
¿Cómo puedo lograrlo?
al crear el y-axis y, puede pasar la cantidad de ticks que desea representar
svg .select(".y-axis") .attr("transform", `translate(${0 + 25}, 0 )`) .call(yAix.ticks(5)); la otra forma sería usando tickValues
svg .select(".y-axis") .attr("transform", `translate(${0 + 25}, 0 )`) .call(yAix.tickValues([0,25,50,75,100]));