根据 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>