javascript - 创建两种颜色之间的色阶

Question

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

Answer 1

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

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

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

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

然后，另一个比例将这 9 个值映射到任意两个给定颜色之间的 9 个颜色。在您的情况下，“黄色” 和 “红色”:

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

<script src="https://d3js.org/d3.v4.min.js"></script>

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