Tengo el siguiente conjunto de tablas de colores donde el primer valor en la primera matriz se refiere al punto y los siguientes 3 valores son puntos RGB.
Ej: Para el punto 0.0, el valor RGB debe ser 247, 255, 164 y así uno para otro punto
"colors": [ [ 0.0, 247, 255, 164], [ 0.2, 185, 116, 255], [ 0.4, 73, 255, 35], [ 0.6, 247, 255, 164], [ 0.8, 185, 116, 255], [ 1.0, 247, 255, 164] ]Mi problema es que si obtengo el punto 0.1 de otro componente, que está entre el punto [0.0, 247, 255, 164] y [0.2, 185, 116, 255] (necesito usar color entre estos 2 puntos), entonces cómo podría interpolar o cómo asignar color a mi punto (0.1).
Esta es mi función en la que obtengo un punto de otro componente y, en función del punto, necesito devolver el color.
export function rgbValues(point: number) { // colors from color table const color_table = colors // based on point returning color const result = color_table.find((element: any) => { return element[0] == point }); // return color based on point return result; }Nota: estoy usando d3 JS y creo que puedo usar la función de interpolación d3, pero ahora estoy seguro de cómo usarla en mi escenario.
Puede usar una escala lineal con múltiples (más de dos) valores en el dominio y el rango (cada uno debe tener la misma cantidad de valores).
Como tiene la misma cantidad de puntos en el dominio y el rango, solo necesitamos extraer el par de color y valor, usando una matriz de colores como rango y una matriz de todos los valores asociados como rango:
Con mis datos ficticios, por facilidad he modificado los valores de dominio para acomodar los datos en lugar de modificar los datos para acomodar la escala :
let colors = [ [ 0, 247, 255, 164], [ 20, 185, 116, 255], [ 40, 73, 255, 35], [ 60, 247, 255, 164], [ 80, 185, 116, 255], [ 100, 247, 255, 164] ]; // separate domain and range colors = colors.map(function(c) { return {value: c.shift(), color: c} }) let scale = d3.scaleLinear() .range(colors.map(function(d) { return "rgb("+d.color.join(",")+")"; })) .domain(colors.map(function(d) { return d.value; })); d3.select("body") .append("svg") .selectAll(null) .data(d3.range(100)) .enter() .append("rect") .attr("width", 10) .attr("height", 10) .attr("y", d=> Math.floor(d/10)*12) .attr("x", d=> d%10 * 12) .style("fill", scale); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>