javascript - 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: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain

感谢任何帮助!!

Answer 1

听起来你想要的是 quantize scale或 threshold scale -- 一种采用连续输入值并将其分成箱以转换为一组离散输出值的比例尺。

对于量化比例，您将域指定为正常 ([min,max])，并且 bin 的大小由范围内的值的数量决定，这样每个 bin 都是大小相同。

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

The version @FernOfTheAndes 为你工作的是 polylinear scale :具有不同域/范围 block 的线性标度。域的两点之间的值将转换为与范围的相应两点之间的距离相同的值。

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

相比之下，对于具有域 [1,33,66] 和范围[gray,green,yellow,red] 的阈值尺度，任何大于或等于的值到 1 但小于 33 将被映射到纯绿色。

或者，您可以使用域 [0,100]、范围 [green,yellow,red] 的量化比例，并使用单独的测试来分配颜色灰色当值为 0 时。