RGB 值随数组值变化？

Question

我有一个项目，我正在使用 d3js。我必须绘制一条线。但扭曲的是线的颜色会随每个数组值而变化（每 20px 的线包含以下数组的一个元素）。我有创建了线条，但是我遇到了颜色强度问题。我考虑过 for 循环，但我没有得到准确的结果。我想我无法从一种颜色切换到另一种颜色。

（例如--从暗红色-->浅红色-->小暗红色-->深红色）

我有一个超过 10k 值的 json。为了便于理解，我已经简化了我的数组。

var array_1=[0.0,0.1,0.3,0.5,0.7,0.9]

var array_2=[0.02,0.04,0.06,0.08,0.09]

var array_3=[0.001,0.002,0.004,0.007,0.008]

MyQuestion：对于任何给定的颜色（红色、蓝色、绿色、黄色等），我应该能够根据这些数组值绘制数字会，颜色会很强烈。

是否有可能创建一种算法，该算法可以使用数字数组值来操作任何颜色的 RGB 值？如果可能，请提供一些示例。

Answer 1

您只需要将 YCbCr (YUV) 转换为 RGB，因为 YUV 中的 Y 是发光，相当于修改颜色的强度。

这些公式可以在维基百科上找到： http://en.wikipedia.org/wiki/YCbCr

这里还有一个用 JavaScript 实现的例子： http://www.mikekohn.net/file_formats/yuv_rgb_converter.php

例如在 Micael Kohn 的页面上，您可以尝试在 RGB 中设置颜色 并将其转换为 YUV。之后只需降低或提高 Y 值和 将其转换为 RGB。你会注意到这就像改变 强度。

编辑：

给你，给你写个例子，直接点div就行了

function yuv2rgb(Y,U,V){
    R = Y + 1.4075 * (V - 128)
    G = Y - 0.3455 * (U - 128) - (0.7169 * (V - 128))
    B = Y + 1.7790 * (U - 128)
    return { r:Math.floor(R) , g:Math.floor(G) , b:Math.floor(B)}
}

function rgb2yuv(R,G,B){
    Y = R *  0.299000 + G *  0.587000 + B *  0.114000
    U = R * -0.168736 + G * -0.331264 + B *  0.500000 + 128
    V = R *  0.500000 + G * -0.418688 + B * -.081312 + 128
    return { y:Math.floor(Y) , u:Math.floor(U) , v:Math.floor(V)}
}

http://jsfiddle.net/b3FCK/