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

我正试图让这一切正常运作：

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

它目前不起作用，但我这里有一个代码示例：

这是特定的代码块：

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

我一直在寻找这个问题的答案，但这并不是我想要的，因为它将动态值映射到颜色集：

---

感谢您的帮助

听起来你想要的是一个或一个——一个尺度，它接受一个连续的输入值，并将其拆分为若干个箱子，以便转换为一组离散的输出值

对于量化比例，您可以将域指定为正常值（

[min，max]

），并且存储单元的大小由范围中的值的数量决定，因此每个存储单元的大小相同

对于阈值比例，将域指定为阈值集，超过该阈值，应使用范围中的下一个值；阈值应该比范围值少一个

@FernOfTheAndes为您提供的是一个：一个具有不同域/范围块的线性比例。域中两个点之间的值将转换为范围中相应两点之间相同距离的值

因此，对于具有域

[0,33,66100]

和范围

[灰色、绿色、黄色、红色]

的多段线比例，值0映射为灰色，值33映射为绿色，但值15映射为介于两者之间的灰绿色

相反，对于具有域

[1,33,66]

和范围

[灰色、绿色、黄色、红色]

的阈值标度，任何大于或等于1但小于33的值都将映射为纯绿色

---

或者，您可以使用带有域

[0100]

、范围

[绿色、黄色、红色]

的量化标尺，并使用单独的测试在值为0时指定灰色。

您的JSFIDLE根本不起作用。这让我很难帮助您。它为我加载，我的数据文件在dropbox上，可能这给您带来了问题？我可能离开这里，但为了方便起见，我硬编码了域值（您可以计算），并更改了heatmapColor（）的参数。这是。@featherz啊，是的，很可能是DropBox；该域名被我公司的DNSOne列入黑名单。更多关于我快速增长的@AmeliaBR链接列表的信息……从您的解释中可以了解到很多。从你忠实的粉丝那里：-）@FernOfTheAndes你显然没有看到我在混合了阈值尺度和分位数尺度（这又是另一回事）之后所做的快速编辑。而且你的小提琴演奏得很好——只是不太符合OP的要求。使用阈值刻度的小提琴工作版本：刻度中有相当数量的细微差别。这是D3中我试图构建一个全面视图的区域之一……这当然有帮助。