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种颜色。在您的情况下，"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;
}

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

如果您不想使用两个刻度，只需在将数字传递到色标之前使用数学来创建9个刻度。

在两种颜色之间创建颜色比例

1 个答案: