Tengo un problema al crear un gradiente de rampa de color con chroma.js . Después de especificar una lista de colores y una lista de valores de dominio de igual longitud, descubro que la función chroma.js resultante devuelve el mismo color para todos los valores entre las dos primeras entradas en el dominio (incluidas).

Puedo reproducir esto con un ejemplo simple en el que consulto solo los valores de dominio a través de la función Chroma.js (en lugar de muchos valores intermedios como en mi caso de uso real). El resultado de esto es la primera fila de salida del fragmento de código incluido.

Puede ver que consultar 0.001 y 0.01 produce el primer color #ffffcc , mientras que 0.01 debería asignarse al segundo color #f6d470 . El tercer color y los subsiguientes funcionan correctamente.

Recorriendo solo los colores originales, podemos ver cómo debería verse el segundo color del segundo valor de dominio (la segunda fila de colores generados por el fragmento).

Espero que me esté perdiendo algo obvio aquí; Cualquier ayuda sería apreciada.

 const output = document.getElementById('output'); const colors = [ "#ffffcc", "#f6d470", "#e79452", "#c2554a", "#68352a", "#1a1a01" ]; const domain = [ 0.001, 0.01, 0.1, 1, 10, 100 ] const chromaColors = chroma.scale(colors).domain(domain).mode('lab'); for (const domainEntry of domain) { var color = chromaColors(domainEntry); output.innerHTML += "<div class='color' style='background-color: " + color + ";'></div>" } output.innerHTML += '<br/>'; for (const color of colors) { output.innerHTML += "<div class='color' style='background-color: " + color + ";'></div>" }

 .color { display: inline-block; width: 50px; height: 50px; margin: 2px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"></script> <div id="output"></div>