Question

所以我尝试使用d3创建一个色阶，但我只是对使用的缩放比例感到困惑。我根据pearson correlation对事物进行着色，并希望使用以下内容：

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

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

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

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

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

我尝试使用以下颜色制作diverging色标：

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

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

continuous input => discrete output

但我对如何使用d3色标进行了混淆....我知道有here所述的量化和分位数比例，但我不知道这是什么我正在寻找。

我对它们的理解是它们接受连续输入并将域分成统一段（量化）或域分位数......但这不是我想要的。我希望将[-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) = #80cdc1时，我最终得到colorScale(.29) = "#f5f5f5"。

我也尝试过线性刻度：

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

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

我很困惑，如果有一种方法可以在d3中做到这一点，而且我是一个新的色标，所以在花了几个小时后，我只是不知道该尝试什么..我应该使用什么颜色的比例？有没有办法将输出设置为一组离散的颜色？

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

编辑 threshold量表是否可行？

Answer 1

您想使用d3.scale.threshold（）。

＆＃13;

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));
});

＆＃13;

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

＆＃13;

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

D3色标在将连续输入映射到预定的离散区间时会出现混淆吗？

1 个答案: