D3散点图坐标轴最大值未正常显示问题技术求助

D3坐标轴最大值不显示问题修复方案 #

Y轴39.5刻度不显示问题

你在定义Y轴domain时对最大值使用了parseInt做整数转换，parseInt(39.5)会直接丢弃小数部分得到整数39，相当于Y轴的定义域上限被手动修改为39，因此不会显示39.5的刻度。
修复代码：

// 移除parseInt转换，保留原始数值精度
const yScale = d3.scaleLinear()
  .domain([d3.min(timings), d3.max(timings)])
  .range([h - paddings.paddingBottom, paddings.paddingTop]);

如果需要让轴端和最大值之间留少量空隙，可以给最大值加小幅度偏移：

.domain([d3.min(timings), d3.max(timings) * 1.02])

额外优化提示：你当前Y轴tickFormat的模板只写了左括号，输出的刻度会显示为(39.50，如需成对括号可以调整为(d) => ${d.toFixed(2)}或者`(d) => `(${d.toFixed(2)})。 #

X轴2015刻度不显示问题

D3坐标轴默认会自动计算刻度间隔，当定义域上限2015未落在自动生成的刻度点位上时，就不会单独显示该值。可以通过tickValues强制指定包含2015作为最终刻度：
修复代码：

const xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.format("d"))
  // 在自动生成的刻度基础上追加2015作为最后一个刻度
  .tickValues([...xScale.ticks(), 2015]);

如果调整后2015仍显示不全，检查X轴的range设置是否正确，确保画布右侧预留了足够的padding容纳刻度文字，避免被画布边界截断。 #

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