javascript - 根据 3 种颜色的值生成 16 种颜色

Question

我正在尝试在 javascript 中编写函数，它可以根据给定值在三种颜色之间生成颜色。

解释如下:

---

有两种颜色:#0a0000、#ffaa03 和#ffffd5
总共有 16 个传感器，例如 (0.2,0.9,2,2.3,3.5,4,7.7 … 27.7) - 这可以是无序的
现在我试图从这些传感器值中找到最小值和最大值，最低值将获得#ffffd5 颜色，最高值将获得#0a0000 颜色，中间值将获得#ffaa03 颜色。现在中间的所有值都将根据它们与最小值和最大值的接近程度获得这两种颜色之间的颜色，这两种颜色也接近中间范围颜色。

更新

我试过下面这个方法，但是它给出了错误的颜色值

let hex = '0123456789ABCDEF';

    let middleValue = this.maxValue / 2;
    if (x == this.minValue) {
      return '#ffffd5';
    } else if (x > middleValue - 1 && x < middleValue + 1) {
      return '#ffaa03';
    } else if (x == this.maxValue) {
      return '#0a0000';
    } else {
      if (x < middleValue - 1) {
        let perc = x * (middleValue - 1);
        let hexVal = hex[Math.round(16 * perc)];
        return '#FF' + hexVal + hexVal + '00';
      } else if (x > middleValue + 1) {
        let perc = x / (middleValue + 1) / 0.5 - 1;
        let hexVal = hex[hex.length - Math.round(16 * perc)];
        return '#' + hexVal + hexVal + '0000';
      }
    }

这是生成的图像

根据值，我希望它看起来与此类似

Answer 1

在我看来，您需要的比例是一个简单的线性比例，域是数据的范围，范围是["#ffffd5", "#0a0000"]。

这是一个示例，数据未排序(如您所述):

const fakeData = d3.range(16).map(_ => d3.randomUniform(30)());
const scale = d3.scaleLinear()
  .domain(d3.extent(fakeData))
  .range(["#ffffd5", "#0a0000"]);
d3.select("body").selectAll(null)
  .data(fakeData)
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

div {
  display: inline-block;
  margin-right: 4px;
  width: 20px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

这里对数据进行了排序:

const fakeData = d3.range(16).map(_ => d3.randomUniform(30)()).sort((a, b) => a - b);
const scale = d3.scaleLinear()
  .domain(d3.extent(fakeData))
  .range(["#ffffd5", "#0a0000"]);
d3.select("body").selectAll(null)
  .data(fakeData)
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

div {
  display: inline-block;
  margin-right: 4px;
  width: 20px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

最后，您发布的图片与您描述的颜色不匹配(从 #ffffd5 到 #0a0000)。也就是说，您也可以将顺序刻度与另一个颜色数组一起使用，例如:

const fakeData = d3.range(16).map(_ => d3.randomUniform(30)()).sort((a, b) => a - b);
const scale = d3.scaleSequential(d3.interpolateReds)
  .domain(d3.extent(fakeData));
d3.select("body").selectAll(null)
  .data(fakeData)
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

div {
  display: inline-block;
  margin-right: 4px;
  width: 20px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>