javascript滑块加权值答案

【问题标题】：javascript slider weighted valuesjavascript滑块加权值
【发布时间】：2012-01-04 17:36:27
【问题描述】：

我有一个 JavaScript 滑块，它根据其位置输出一个介于 0 和 1 之间的值。我想将该值转换为另一个介于 100 和 1000 之间的值，但基于 100 和 1000 之间的一组数据点的分布。

这里的用例是，当一组数字非常接近时，我希望滑块对变化不那么敏感。例如...假设比例中的值是：

100, 200, 300, 500, 1000

值 100-500 可能会占据滑块的前 80%，因为它们分布更紧密，因此更容易在它们之间进行选择。

显然有一个数学函数可以计算这个，可能涉及标准偏差和系数。有人知道是什么吗？

【问题讨论】：

标签： javascript algorithm math calculus

【解决方案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 />');
}

【讨论】：

谢谢，这很好用。反转此计算的最佳方法是什么？

【解决方案2】：

我认为任何类型的多项式方程，使用滑块值作为自变量都可以。具体等式将取决于您的具体需求/分配。

例如，如果X = 10 * [slider value]-1 * (X^2) 会给你一个甚至倒置的抛物线

【讨论】：

【解决方案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 等等。

【讨论】：

【解决方案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 />');
}

【讨论】：