D3.js设置ticks(4)无法得到0-25步长Y轴刻度的解决方法

D3 坐标轴的ticks()方法传入的数值仅为建议刻度数量，不具备强制约束力。D3 生成刻度时会优先选择符合大众读数习惯的规整间隔（间隔值固定为1、2、5三个基数乘以10的整数次幂），再结合你传入的建议数量选最接近的方案。
你传入ticks(4)时，D3计算发现间隔20（属于2*10^1的规整间隔）会生成6个刻度，和建议值偏差较小，就直接采用了该方案；而你预期的25间隔不属于默认规整间隔序列，不会被自动选中，因此出现了和预期不符的刻度。

使用tickValues()方法手动指定固定刻度数组即可，该方法会强制渲染你传入的刻度值，完全不受D3自动选值逻辑影响，是这类固定刻度需求的最稳妥实现方式。
你仅需要修改Y轴调用部分的代码，将原有的.ticks(4)替换为.tickValues([0,25,50,75,100])，其余的网格线、百分比格式化配置无需改动：

svg
  .select(".y-axis")
  .attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)   
  .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
  .call(
    yAix
      .tickValues([0,25,50,75,100]) // 手动指定固定刻度
      .tickSize(-width)
      .tickFormat(function(d){return d + "%"})
  );

修改后Y轴就会准确渲染0-25-50-75-100的间隔刻度。

内容的提问来源于stack exchange，提问作者C Sharper