Este es el caso, necesito dibujar un círculo en píxeles por matriz de números, por ejemplo [22, 25, 36, 44, 115, 180]
El círculo más pequeño debe ser de 20 px, y el más grande debe ser de 130 px, en este caso, el número más pequeño es 22 y debe ser de 20 px, y el más grande es de 180 y el círculo debe ser de 130 px.
Entonces, en cualquier caso de números en la matriz, debemos comenzar con el círculo más pequeño de 20 px y el más grande de 130 px, todo lo que hay entre ellos debe escalar en consecuencia.
const getSize = (values, value) => { let size; const volumes = values.map(a => a.value).sort((a, b) => a - b); const min = Math.min(...volumes); const max = Math.max(...volumes); console.log(min, max, volumes); return size; };El método recibirá parámetros del servidor y el valor del único objeto donde necesito devolver el tamaño del círculo en ancho y alto de estilo, algo como esto a continuación.
<span style={{ bottom: 0, width: getSize(item.values, itemData.value), height: getSize(item.values, itemData.value), position: 'absolute', left: 0, right: 0, margin: 'auto', }} />Calcule una escala relativa de cada número como scale = (number - min) / (max - min) y luego haga lo contrario usando los valores min y max deseados:
numbers = [22, 25, 36, 44, 115, 180] min = numbers[0] max = numbers[numbers.length - 1] scales = numbers.map(x => (x - min) / (max - min)) newMin = 20 newMax = 130 newNumbers = scales.map(x => newMin + x * (newMax - newMin)) console.log(newNumbers) Agregue Math.floor si necesita números enteros.