使用d3.interpolateViridis实现连续颜色图例时刻度域值显示异常

d3的axis.ticks()方法仅用于传入刻度生成的参考值，D3为了保证刻度间隔均匀、可读性高，会自动调整实际生成的刻度值，不会严格遵循传入的刻度数量，也不会默认强制展示domain的首尾值。另外你的代码存在变量名拼写不一致问题：你定义的色阶变量是colorScale2，但后续生成legendscale时调用的是colorscale.domain()，大小写不匹配会导致domain取值异常，需要先修正。

方案1：仅展示首尾两个刻度（匹配你的需求） #

直接用tickValues()方法强制指定刻度为domain的首尾值，适配动态变化的domain：

// 修正变量名拼写错误
var legendscale = d3.scaleLinear()
.range([0, legendheight - margin.top - margin.bottom])
.domain(colorScale2.domain());
        
// 轴配置改用tickValues强制取domain两端值
var legendaxis = d3.axisRight()
.scale(legendscale)
.tickSize(16)
.tickValues(legendscale.domain()); // 替换原来的.ticks(2)

方案2：保留自动生成的中间刻度，同时强制展示首尾值 #

如果需要同时显示中间刻度和首尾的精确domain值，可以合并自动生成的刻度和domain值后去重排序：

var autoTicks = legendscale.ticks(3); // 可调整参数控制中间刻度数量
var finalTicks = [...autoTicks, ...legendscale.domain()]
  .sort((a, b) => a - b)
  // 去重，避免首尾值和自动刻度重叠
  .filter((val, idx, arr) => idx === 0 || Math.abs(val - arr[idx-1]) > 1e-6);

var legendaxis = d3.axisRight()
.scale(legendscale)
.tickSize(16)
.tickValues(finalTicks);

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