javascript - D3比例尺未将颜色映射到值

我正在尝试创建一个将整数映射到确定圆形填充的颜色的比例尺。

我尝试使用d3.scaleThreshold来“存储”域中的值，但无济于事。就目前而言，比例尺将所有值映射到一种颜色。

真的很感谢这里的任何指示！

码：

var colours = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB",
"#63FFCB","#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63",
"#FBFF63","#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];

var heatmapColour = d3.scaleLinear()
.domain(d3.range((0, 1, 1.0 / (colours.length - 1))))
.range(colours);

var hi_scale = d3.scaleLinear()
.range([0,100])
.domain(hi_extent);

最佳答案

使用量化比例

https://jsfiddle.net/erxws2c8/

var colours = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB",
"#63FFCB","#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63",
"#FBFF63","#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];

var heatmapColour = d3.scaleQuantize()
.domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
.range(colours);

另外，您在d3.range((0, 1, 1.0 / (colours.length - 1)))中还有一组额外的括号，导致该函数看到1个参数而不是3个参数。

您可能还需要考虑分位数比例。