javascript - 颜色插值

Question

我想在 2 种颜色之间进行插值，并在给定特定数字的情况下生成一个包含该数量插值颜色的数组。

我发现D3有一个方法叫做d3.interpolate()，但是我不知道怎么用。

在给定要插值的两种颜色和所需插值颜色的数量的情况下，如何使用 D3 插值器生成颜色数组？

Answer 1

对于使用 D3 插值器，您只需要了解您将传递给插值器的参数从 0 到 1 不等。 API很清楚:

The returned function i is called an interpolator. Given a starting value a and an ending value b, it takes a parameter t in the domain [0, 1] and returns the corresponding interpolated value between a and b. An interpolator typically returns a value equivalent to a at t = 0 and a value equivalent to b at t = 1.

所以，给定这个插值器，从 red 到 green:

var colorInterpolator = d3.interpolateRgb("red", "green");

我们只需要传递从 0 到 1 的值。例如，要创建一个有 7 种颜色的数组，我们会将这些值传递给插值器:

[0, 0.16, 0.33, 0.5, 0.66, 0.83, 1]

检查这个演示:

var colorInterpolator = d3.interpolateRgb("red", "green");

var steps = 7;

var colorArray = d3.range(0, (1 + 1 / steps), 1 / (steps - 1)).map(function(d) {
  return colorInterpolator(d)
});

console.log(colorArray)

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

现在，让我们看看该数组中的颜色:

var colorInterpolator = d3.interpolateRgb("red", "green");

var steps = 7;

var colorArray = d3.range(0, (1 + 1 / steps), 1 / (steps - 1)).map(function(d) {
  return colorInterpolator(d)
});

d3.select("body").selectAll(null)
  .data(colorArray)
  .enter()
  .append("div")
  .attr("class", "myDivs")
  .style("background-color", String)

.myDivs {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  display: inline-block;
}

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