D3.js设置3个刻度却显示4个的问题求助

D3的ticks()方法里的参数只是建议的刻度数量，不是严格强制执行的数值。它会自动根据数据的定义域、数值的可读性（比如优先选择整数、偶数这类易辨识的数）来调整最终生成的刻度数量和值。你的数据最大值是6，D3认为0、2、4、6这样的偶数刻度更直观，所以生成了4个刻度，而非你预期的3个。

要严格得到[0, 3, 6]这三个刻度，最直接的方法是用tickValues()替代ticks()，手动传入你需要的刻度数组：

svg
  .select(`[data-labels-y]`)
  .call(d3.axisLeft().scale(yScale).tickValues([0, 3, 6]).tickPadding(4))

如果不想硬编码刻度值，希望根据Y轴的定义域动态生成最小、中间、最大三个刻度，可以这样写：

const [yMin, yMax] = yScale.domain();
const yMid = (yMin + yMax) / 2;
svg
  .select(`[data-labels-y]`)
  .call(d3.axisLeft().scale(yScale).tickValues([yMin, yMid, yMax]).tickPadding(4))

这样不管后续数据怎么变化，Y轴都会自动生成对应定义域的三个关键刻度值。

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