D3 色标 将连续输入映射到预定离散箱时感到困惑?

Question

所以我正在尝试用d3创建一个色阶，但我只是对确切使用什么比例感到困惑。我正在根据皮尔逊相关性对事物进行着色，并希望使用以下箱：

[-1,-0.5,-0.3,0,0.3,0.5,1]

皮尔逊相关从-1到1是连续的，但不同的值可能意味着更高的相关性。例如：

高相关性：[-1,-.5] & [.5,1]

中等相关性：[-.5,-.3] & [.3,.5]

低相关性：[-.3,0] & [0,.3]

我正在尝试使用以下颜色制作发散色阶：

colors = ["#a6611a", "#dfc27d", "#f5f5f5", "#80cdc1", "#018571"]

基本上，对于每个级别的相关性，我希望它被映射到这些确切的颜色之一。因此，高相关性将映射到#a6611a和#018571，中等相关性将映射到#dfc27d和#80cdc1，依此类推。我非常想要：

continuous input => discrete output 

但是我对如何使用 d3 色标执行此操作感到困惑......我知道有这里描述的量化和分位数尺度，但我不知道这是否是我正在寻找的。

我对这些的理解是，它们接受连续输入并将域拆分为均匀段(量化)或按域分位数......但这不是我想要的。我想输入一个范围[-1,1]并且总是得到#a6611a和#018571，以便在[-1,-.5] & [.5,1]等中进行输入。这可能与这些秤中的任何一个有关吗？

我试过了：

var colorScale = d3.scale.quantile()
.domain([-1,-0.5,-0.3,0,0.3,0.5,1])
.range(colors);

但是如果我这样做，我最终会在我想colorScale(.29) = "#f5f5f5"的时候得到colorScale(.29) = #80cdc1.

我还尝试了线性刻度：

var colorScaleLinear = d3.scale.linear()
.domain([-1,-0.5,-0.3,0,0.3,0.5,1])
.range(colors);

但在这种情况下，我会将数据映射到不一定是我的 5 种颜色之一的颜色。示例：colorScaleLinear(.29) = #058774

我只是很困惑是否有办法在 d3 中做到这一点，而且我是色标的新手，所以在花了几个小时之后，我只是不确定该尝试什么......我应该使用什么色阶？有没有办法将输出设置为一组离散的颜色？

任何帮助将不胜感激，谢谢！！

编辑阈值尺度会是要走的路吗？

Answer 1

你想使用 d3.scale.threshold()。

var q=d3.scale.threshold()
	.domain([-1,-0.499999,-0.2999999,0.3,0.5,1])
	.range( ["#a6611a","#a6611a", "#dfc27d", "#f5f5f5", "#80cdc1", "#018571","#018571"]);
a=[-0.5,-0.50001,-0.4999,-0.3,-0.2999,0,0.299,0.3001,0.5001,1];
a.forEach(function(i){
console.log(i, q(i));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

var q=d3.scale.threshold()
.domain([-1,-0.499999,-0.2999999,0.3,0.5,1])
.range( ["#a6611a","#a6611a", "#dfc27d", "#f5f5f5", "#80cdc1", "#018571","#018571"]);