颜色的插值 [英] Interpolation of Colors

问题描述

我想在两种颜色之间进行插值，并且在给定特定数字的情况下，生成具有该插值颜色数的数组。

我发现D3有一个方法叫做 d3.interpolate（），但我不知道如何使用它。

如果要插入两种颜色和所需插值颜色的数量，如何使用D3插值器生成颜色数组？

解决方案

对于使用D3插补器，您只需要了解您将传递给插值器的参数从0到1不等。 API 是明确的：

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

所以，给定这个插补器，从红色到绿色：

  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 /步），1 /（步骤-1））。map（函数（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 /（步骤 - 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;身高：40px;保证金权利：5px; display：inline-block;}  

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

I want to interpolate between 2 colors and, given a specific number, generate an array with that number of interpolated colors.

I found that D3 has a method called d3.interpolate(), but I don't know how to use it.

How can I use D3 interpolator to generate an array of colours given the two colors to interpolate and the number of desired interpolated colors?

解决方案

For using a D3 interpolator you just need to understand that the argument you'll pass to the interpolator varies from 0 to 1. The API is clear:

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.

So, given this interpolator, going from red to green:

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

We just need to pass the values going from 0 to 1. For example, to create an array with 7 colors, we'll pass these values to the interpolator:

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

Check this demo:

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>

Now, let's see the colors in that array:

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>

这篇关于颜色的插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！