颜色插值

Question

我希望能够在两种颜色之间进行插值，并根据给定的数字生成一个包含这些插值颜色的数组。

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

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

- zahma

---

你的帖子中没有任何问题，只有一句陈述，几乎是在抱怨。我将其编辑为一个有意义的问题。 - Gerardo Furtado

Answer 1

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

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

因此，给定这个从红色到绿色的插值器：

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>

- Gerardo Furtado

---

那段代码有点问题，Gerardo。但是解决方案很好。 - Shane G

比错误更奇怪的是，现在它运行得很好。幸运的是，在它发生时我拍了一张截图。 - Shane G

可能发生的情况是，当您点击代码片段时，D3源站点对您不可用。 - Gerardo Furtado

我已经尝试了其他函数，比如d3.interpolateHsl和d3.interpolateLAB，但似乎它们返回相同的结果。我想使用其他方法来生成不同的插值颜色。 - zahma

在Stack Overflow这里，接受有用的答案是一种良好的礼仪。此外，由于这是另一个问题，请发布另一个问题。 - Gerardo Furtado

Answer 2

你可能想要查看 d3-color，以了解在 d3 中如何操作和插值颜色。

- Hugues Stefanski

---

是的，我查过了，但我没找到如何生成一个插值颜色数组的方法，该数组由两个颜色和所需颜色数量组成。 - zahma