颜色插值

Question

我想在 2 种颜色之间进行插值，并根据给定的特定数字生成具有该插值颜色数量的数组。

我发现D3有一个名为 的方法d3.interpolate()，但我不知道如何使用它。

给定要插值的两种颜色以及所需插值颜色的数量，如何使用 D3 插值器生成颜色数组？

Answer 1

对于使用 D3 插值器，您只需要了解传递给插值器的参数在 0 到 1 之间变化。API很清楚：

返回的函数 i 称为插值器。给定起始值 a 和结束值 b，它采用域 [0, 1] 中的参数 t 并返回 a 和 b 之间相应的插值。插值器通常在 t = 0 时返回相当于 a 的值，在 t = 1 时返回相当于 b 的值。

因此，给定这个插值器，从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");

[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)