在图例刻度中显示正确域值的问题

Question

我正在使用 d3.interpolateViridis 处理连续颜色图例。我在显示图例刻度值时遇到问题。我想在图例中显示我的最小值（在一端）和最大值（在另一端）（域值）。我尝试更改刻度值但没有帮助。

这是我的代码片段：

//scale
var colorScale2 = d3.scaleSequential(d3.interpolateViridis).domain([0, 0.38]);
    
//other code
    
var legendscale = d3.scaleLinear()
.range([0, legendheight - margin.top - margin.bottom])
.domain(colorscale.domain());
        
// scale tick
var legendaxis = d3.axisRight()
.scale(legendscale)
.tickSize(16)
.ticks(2);

此外，我已经分享了 JS fiddle link，其中 tick 为 0.0 和 0.2（这应该是最大值：0.38）。

https://jsfiddle.net/shru90/e42vcLy0/30/

注意：我的最小值为 0，最大值为 0.38（可能因数据而异）

Answer 1

默认情况下，轴将刻度设置为漂亮的圆形值。如果您希望为特定值添加刻度线，则可以设置 tickValues:

d3.axisRight()
    .scale(legendscale)
    .tickSize(16)
    .tickValues(legendscale.domain());