根据3种颜色的值生成16种颜色 [英] Generate 16 colors based on values from 3 colors

问题描述

这里有一个解释:

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

There are two colors : #0a0000, #ffaa03 & #ffffd5
There are total 16 sensor e.g (0.2,0.9,2,2.3,3.5,4,7.7 … 27.7 ) - this can be unordered
Now I am trying to find the min and the max from these sensor values, the lowest value would get #ffffd5 color, the highest value would get #0a0000 color, and the middle value will have #ffaa03 color. Now all the values in the middle will get the color between these two colors that are also close to the middle range color based on their value of how close they are to the minimum and maximum.

更新

我已经尝试过以下方法，但是它给出了错误的颜色值

I have tried this below method but its giving wrong color values

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';
      }
    }

这是生成的图像

我希望它看起来像这样，具体取决于值

Where as I want it to look similar to this depending on the values

推荐答案

在我看来，您需要的标度是一个简单的线性标度，以域为数据范围，范围为 [";#ffffd5"，#0a0000"] .

It seems to me that the scale you need is a simple linear scale, with the domain as the extent of your data and the range as ["#ffffd5", "#0a0000"].

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

Here is an example, with the data unsorted (as you mentioned):

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>

在这里对数据进行排序:

And here with the data sorted:

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 ).也就是说，您也可以对其他颜色阵列使用顺序刻度，例如:

Finally, the image you posted doesn't match the colours you described (from #ffffd5 to #0a0000). That said, you could alternatively use a sequential scale with another colour array, for instance:

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>

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