javascript - 根据整数值查找颜色 - 快速算法

Question

我构建了一些应用程序，它根据某个值计算颜色渐变。我使用 d3.js 来计算颜色，但我意识到这个函数非常慢 - 它在 80 毫秒内执行(该函数执行了 40.000 次)。这对我来说太大了(我使用了很多次)

var findColor = d3.scaleLinear().domain([0,10,20,30,40,50,60,70,80,90,100,110]).range(['#a50026 ','#d73027 ','#f46d43 ','#fdae61 ','#fee08b ','#ffffbf ','#d9ef8b ','#a6d96a ','#66bd63 ','#1a9850 ','#006837 ','#006837 ']);

您能告诉我更好的解决方案吗？我需要更快的想法。

50盒的开关会更好、更快吗？

Answer 1

好吧，不要认为使用现代浏览器的像样的计算机需要 80 毫秒才能执行该功能。

这不是一个答案(从某种意义上说，我没有提供任何更快的替代方案)，但我必须将其写为答案，因为我想使用该片段(我可以不要在评论中使用)来向您展示此功能的速度有多快:

在下面的代码片段中，该函数执行了 10000 次。在我的(相当旧的)计算机上，使用 Chrome，运行所有循环需要 21 毫秒。点击“运行代码片段”进行检查。

var t1 = performance.now()

var findColor = d3.scaleLinear()
    .domain([0,10,20,30,40,50,60,70,80,90,100,110])
    .range(['#a50026 ','#d73027 ','#f46d43 ','#fdae61 ','#fee08b ','#ffffbf ','#d9ef8b ','#a6d96a ','#66bd63 ','#1a9850 ','#006837 ','#006837 ']);

for(var i = 0; i < 10000; i++){
findColor(Math.random()*110)
}

var t2 = performance.now()

console.log("Time: " + (t2 - t1) + " miliseconds");

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

注意:OP编辑了问题，解释说80ms指的是40000次。这与上述代码片段循环 40000 次的性能大致相同。