在两种颜色之间创建色阶答案

【问题标题】：create color scale between two colors在两种颜色之间创建色阶
【发布时间】：2018-07-24 05:15:55
【问题描述】：

let colors = ["#5D2EE8", "#2F9EEE", "#2FC8EE", "#2DD91A", "#CBF22C",
              "#F2CE2C", "#F06E1D", "#E61717", "#3C2EA8", "#7A2EA1"];
let colorRange = d3.scale.quantile()
                   .domain([0, 31])
                   .range(colors);

我想用在两种颜色之间创建 x 颜色的调色板来替换这个实现？例如，我想将 0 到 31 之间的 90 个数字映射到黄色和红色之间的 9 种颜色。这可能吗？我正在使用 v3

【问题讨论】：

标签： javascript d3.js colors

【解决方案1】：

您可以使用自定义插值器创建顺序比例，或使用自定义颜色数组创建阈值比例。

但是，由于您想方便地使用任意两种颜色作为开始和结束颜色，我认为最简单的解决方案是使用两个刻度。

第一个映射从 0 到 31 的所有数字仅映射到 9 个值：

var scale = d3.scaleQuantize()
    .range(d3.range(9))
    .domain([0, 31]);

然后，另一个比例将这 9 个值映射到任意两种给定颜色之间的 9 种颜色。在你的情况下，"yellow" 和 "red"：

var colorScale = d3.scaleLinear()
    .range(["yellow", "red"])
    .domain([0, 9]);

我这里用的是v4，你可以把它们改成d3.scale.quantize()和d3.scale.linear()。

这是一个演示（也使用 v4），我正在创建 150 个 div，每个 div 代表一个介于 0 和 31 之间的数字。输出只有 9 种颜色：

var scale = d3.scaleQuantize()
  .range(d3.range(9))
  .domain([0, 31]);
var colorScale = d3.scaleLinear()
  .range(["yellow", "red"])
  .domain([0, 9]);
var divs = d3.select("body").selectAll(null)
  .data(d3.range(0, 31.2, 0.2))
  .enter()
  .append("div")
  .style("background-color", function(d) {
    return colorScale(scale(d))
  });

div {
  margin: 2px;
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 1px solid gray;
}

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

如果您不想使用两个比例，只需在将数字传递给颜色比例之前使用数学来创建 9 个分档。

【讨论】：