D3.js轴刻度显示异常：指定14个刻度却出现步长20的刻度

问题原因 #

你使用axis.ticks(14)时，误以为这个参数是强制生成指定数量的刻度，但实际上D3的ticks()方法是建议性的——它只是告诉D3“尽量生成约14个刻度”，而非严格要求。

D3内部会优先选择「人类易读的步长值」（比如10、20、25这类整数或整十/整五数），同时结合定义域范围、视觉空间等因素自动调整刻度数量和步长，目的是让坐标轴刻度更易读。你的场景中，D3判断步长20生成的刻度在视觉呈现上更合理，因此忽略了你期望的14个刻度数量。

解决方法 #

如果需要严格固定步长和刻度数量，不要使用ticks()，改用tickValues()手动传入刻度值数组。通过d3.range()可以快速生成步长为25的刻度数组（从0到350，包含两端，共14个值）：

const svg = d3.select('svg').attr('width', 1000).attr('height', 600);
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
const scale = d3.scaleLinear().range([0, 750]).domain([0, 350]);
// 手动生成步长25的刻度值，覆盖默认计算逻辑
const axis = d3.axisTop(scale).tickValues(d3.range(0, 351, 25));
layer.call(axis);

补充说明 #

• d3.range(0, 351, 25)会生成[0,25,50,...,350]，刚好14个刻度值，完全符合你的计算预期。
• 若仍想使用ticks()的自动逻辑但要保证步长为25，可以搭配scale.nice()让定义域自动对齐到友好值，但这在你的场景中（定义域已经是0-350，刚好是25的倍数）作用不大。

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