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

Posted 2023-02-16

【中文标题】在图例刻度中显示正确的域值的问题

【英文标题】：Issue with displaying correct domain values in legend tick

【发布时间】：2021-11-28 11:43:27

【问题描述】：

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

这是我的代码 sn-p：

//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 链接，它的刻度为 0.0 和 0.2（这应该是最大值：0.38）。

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

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

【参考方案1】：

默认情况下，轴将刻度设置为漂亮的圆形值。如果您想要为特定的值打勾，那么您可以设置tickValues：

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

【讨论】：

谢谢。你的解决方案对我有用，丹。我之前尝试过通过在数组中传递最小和最大域值来尝试刻度值，因此它不起作用。我之前路过的路错了。