D3.js 将scaleQuantile与“一起使用”；“绿色”；配色方案

我有一些数据，它们的值有一个范围（0，100），但大多数数据的值在80到100之间

数据示例：

97.00 93.30 92.20 92.70 91.10 89.10 89.90 89.10 89.70 88.90
89.00 89.30 88.76 88.46 87.45 85.05

我必须使用颜色进行可视化，使用线性比例不是最好的，因为它不允许我很容易地区分颜色。 所以我考虑使用

scaleQuantile

我读到它使用从黑色到红色的颜色，但我想使用绿色刻度。 我该怎么做

这是我的一段代码：

var colorScale = d3.scaleQuantile(d3.interpolateViridis)
    .domain([0, 100]);

// other code

var cells = svg.selectAll('rect')
    .data(data)
    .enter().append('g').append('rect')
    .attr('class', 'cell')
    .attr('width', cellSize)
    .attr('height', cellSize)
    .attr("rx", 4)
   .attr("ry", 4)
    .attr('y', function(d) { 
        return yScale(d.nuts_name); 
    })
    .attr('x', function(d) { 
        return xScale(d.year); 
    })
    .attr('fill', function(d) {
        return colorScale(d.value);
        }
    })

---

谢谢你这里有两个问题：

分位数标度中的域与量化标度不同，它不是两个值之间的范围。它必须是包含所有值的数组。API明确指出：

如果指定了域，则将分位数刻度的域设置为指定的离散数值集。（强调矿山）

这不是使用d3的正确方法。同样，API是明确的：

给定[0,1]范围内的数字t，返回“viridis”感知均匀配色方案中的相应颜色

因此，一个简单的解决方案是创建分位数刻度，使其根据您的数据数组返回一个从

0

到

1

的数字（这里，我创建了10个箱子）：

然后将该值传递给d3。InterpologeViridis：

d3.interpolateViridis(colorScale(d))

这是一个演示。

的第一行按原样使用数据，第二行使用排序数组：

var数据=[97.00,93.30,92.20,92.70,91.10,89.10,89.90,89.10,89.70,88.90,89.00,89.30,88.76,88.46,87.45,85.05]；
var sortedData=data.concat（）.sort（）；
var colorScale=d3.scaleQuantile（）
.域名（数据）
.范围（d3.范围（0,1.1,0.1））；
var divs=d3。选择（“主体”）。选择全部（空）
.数据（数据）
.输入（）
.附加（“div”）
.attr（“类”、“单元”）
.样式（“背景色”，功能（d）{
返回d3.interpolateViridis（色标（d））
});
d3.选择（“正文”）.追加（“div”）
.样式（“高度”、“40px”）
var div2=d3.select（“body”）.selectAll（null）
.数据（数据）
.输入（）
.附加（“div”）
.attr（“类”、“单元”）
.样式（“背景色”，功能（d）{
返回d3.interpolateViridis（色标（d））
});
.cell{
宽度：20px；
高度：20px；
保证金：2倍；
显示：内联块；
}
非常感谢您的回复。问题是我不能像这个简单的例子中那样创建数据数组。我的数据更复杂，我有一个世界上每个国家的数据数组。。那么，我能做什么呢？好吧，我根据你在问题中提供的数据写了一个答案。如果您的数据不同，我建议您发布一个新的问题（请不要编辑此问题）。但是，根据您的描述，我想说您可以简单地将所有值合并，创建一个包含所有离散数值的巨大数组。
d3.interpolateViridis(colorScale(d))