взвешенные значения слайдера javascript - PullRequest
Новая
       18

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

5 голосов
/ 04 января 2012

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

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

100, 200, 300, 500, 1000

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

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

Ответы [ 4 ]

2 голосов
/ 04 января 2012

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

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 />');
}
1 голос
/ 04 января 2012

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

    (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 и т. Д.

1 голос
/ 04 января 2012

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

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

0 голосов
/ 04 февраля 2012

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

Продолжая с моего предыдущего ответа , со всеми переменными, объявленными как прежде: 

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 />');
}
...