d3 y轴的间隙为25个数字

Question

我的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);

D3 -y轴的范围为0到100。我在10分的组中获得Y轴 - （0,10,20,30,40,50,60,70,80,90,100）

我想在其差距中绘制它25 - （0,25,50,75,100）

如何实现？

Answer 1

创建y轴时，您可以传递ticks要渲染的的数量

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

，将使用tickvalues

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