d3 将 4 种颜色映射到 4 个数字范围看起来有点像一个非常基本的热图

Question

我试图让它这样工作：

• 0 = 灰色
• 1-33.33 = 绿色
• 33.34-66.66 = 黄色
• 66.67-100 = 红色

它目前无法正常工作，但我在这里有一个代码示例：http : //jsfiddle.net/JLSt4/1/

这是具体的代码块：

    var colors = ["#CCCCCC","#55AF29","#FFD017","#B72E00"];

        var heatmapColor = d3.scale.linear()
            .domain(d3.range(0, 1, 1.0 / (colors.length - 1)))
          .range(colors);

        var getData = d3.extent(jsondata.kpi, function (d) { return +d.status });
        var c = d3.scale.linear().domain(getData).range([0, 1]); 

和显示：

    .style("fill", function(d) { return heatmapColor(c(d))});

我一直在研究这个问题的答案，但它并不是我想要的，因为这将动态值映射到颜色集： D3：创建一个连续的色标，其中包含多个字符串/输入的范围和动态改变域的值

任何帮助表示赞赏！

Answer 1

听起来您想要的是量化标度或阈值标度- 一个采用连续输入值并将其拆分为 bin 以转换为一组离散输出值的标度。

对于量化尺度，您将域指定为法线 ( [min,max])，并且 bin 的大小由范围中的值数量决定，因此每个 bin 的大小相同。

对于阈值比例，您将域指定为一组阈值，高于该值应使用范围中的下一个值；阈值应该少一个，然后是范围值。

该版本是@FernOfTheAndes得到工作对你来说是polylinear规模：与不同的域/范围块的线性刻度。域中两点之间的值将转换为范围内相应两点之间距离相同的值。

因此，对于具有域[0,33,66,100]和范围的多线性比例，[gray,green,yellow,red]值 0 映射到灰色，值 33 映射到绿色，但值 15 映射到介于两者之间的灰绿色。

相反，对于具有 domain[1,33,66]和 range的阈值比例[gray,green,yellow,red]，任何大于或等于 1 但小于 33 的值都将映射到纯绿色。

或者，您可以使用包含 domain [0,100]、 range的量化标度[green,yellow,red]，并在值为 0 时使用单独的测试来分配灰色。