如何基于数值数组动态计算圆圈尺寸：最小20px最大130px

完善后的getSize函数 #

const getSize = (values, value) => {
    const volumes = values.map(a => a.value);
    const min = Math.min(...volumes);
    const max = Math.max(...volumes);
    // 边界处理：所有数值相同时直接返回最小尺寸，避免除以0报错
    if (min === max) return '20px';
    // 线性映射计算尺寸：数值占比对应到20px~130px的尺寸区间
    const ratio = (value - min) / (max - min);
    const size = 20 + ratio * 110;
    // 保留两位小数后拼接px单位，直接适配style属性要求
    return `${size.toFixed(2)}px`;
};

逻辑说明 #

• 移除了原代码中不必要的数组排序操作，仅需提取数值后取最值即可，减少性能损耗
• 线性映射规则完全匹配需求：
  数组最小值对应比例为0，计算得到尺寸20px；数组最大值对应比例为1，计算得到尺寸130px；中间数值按比例均匀缩放
• 可选优化：如果可能出现传入的value超出values数组的最值范围，可以给计算结果加区间限制，避免尺寸超出要求范围：

  const size = Math.min(130, Math.max(20, 20 + ratio * 110));
  

内容的提问来源于stack exchange，提问作者Krešimir Galić