javascript слайдер взвешенные значения

Question

У меня есть ползунок JavaScript, который выводит значение от 0 до 1 в зависимости от его положения. Я хочу преобразовать это значение в значение в другом масштабе между 100 и 1000, но на основе распределения набора точек данных между 100 и 1000.

В данном случае я хочу, чтобы ползунок был менее чувствительны к изменениям, когда имеется очень близкий набор чисел. Например ... скажем, значение в масштабе:

100, 200, 300, 500, 1000 

Значение 100-500 могут занять, скажем, первый 80% ползун из-за их более близкое распределение, поэтому делаете его легче выбрать между ними.

Существует явно математическая функция для вычисления этого, возможно, с использованием стандартного отклонения и коэффициентов. Кто-нибудь знает, что это?

Answer 1

Использование линейной интерполяции между значениями на больших масштабах, что-то вроде

var bigValues = [100, 200, 300, 500, 1000]; 
var input; /* will vary in the range [0.0..1.0] */ 
var idx; /* index of nearest entry in bigValues below input */ 
var frac; /* fraction [0.0..1.0) in interval in bigValues */ 
var output; 
/* try some test values for input */ 
for (var i = 0; i<=20; i++) { 
    input = i * 0.05; 
    idx = Math.floor(input * (bigValues.length - 1)); 

    frac = (input - (idx)/(bigValues.length - 1)) * (bigValues.length - 1); 
    if (frac == 0) { /* no need to calculate */ 
     output = bigValues[idx]; 
    } 
    else { 
     output = bigValues[idx] + (bigValues[idx+1] - bigValues[idx]) * frac; 
    }; 
    document.write(input + ', ' + output + '<br />'); 
} 

Answer 2

Я бы подумал, что любое уравнение полинома, использующее значения ползунка как независимую переменную, будет работать. Конкретное уравнение будет зависеть от ваших конкретных потребностей/распределения.

Например, -1 * (X^2) даст вам даже перевернутую параболу, если X = 10 * [slider value]

Answer 3

Для произвольных значений я бы предложить какую-сплайн-интерполяции. Преобразование набора значений в виде набора точек, где вторая координата в «слайдер масштаба»:

(100, 0.0), (200, 0.25), (300, 0.5), (500, 0.75), (1000, 1.0) 

Теперь просто использовать сплайн-интерполяции по вашему выбору, чтобы создать гладкую кривую, и как только вы кривую вы можете получить значения на шкале 100-1000.

Если вы не хотите внедрять сложную сплайн-интерполяцию, вы можете просто взять линейный, что означает, что для любой точки вашего слайдера между 0.0 и 0.25 вы линейно интерполируете между 100 и 200, между 0,25 и 0,5 интерполировать между 200 и 300 и так далее.

Answer 4

(я не знаю, что этикет для спрашивать обратное к первоначальному вопросу в a comment, но я добавлю это как дополнительный ответ, чтобы соответствовать код)

Продолжая от my previous answer, со всеми объявленными переменными, как и раньше:.

document.write('The other way round:<br />'); 

function findIntervalStart(n) { 
    for (var i = 1; i < bigValues.length; i++) if (n < bigValues[i]) return i-1; 
} 
/* try some test values */ 
for (var i = 1; i <= 21; i++) {  
    output = i * 50; 
    if (output >= bigValues[bigValues.length - 1]) { 
     input = 1; 
    } 
    else if (output <= bigValues[0]) { 
     input = 0; 
    } 
    else { 
    idx = findIntervalStart(output); 
     frac = (output - bigValues[idx])/(bigValues[idx + 1] - bigValues[idx]); 
     input = (idx + frac)/(bigValues.length - 1); 
    }; 

    document.write(output + ', ' + input + '<br />'); 
}