5

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

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

100, 200, 300, 500, 1000

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

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

4

4 回答 4

2

在大规模的值之间使用线性插值，例如

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 />');
}
于 2012-01-04T18:50:32.460 回答
1

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

例如，-1 * (X^2)如果X = 10 * [slider value]

于 2012-01-04T17:42:34.580 回答
1

对于任意值，我会提出某种样条插值。将您的一组值转换为一组点，其中第二个坐标位于“滑块比例”中：

    (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 之间插值等等。

于 2012-01-04T17:51:10.203 回答
0

（我不知道在评论中询问与原始问题相反的礼仪是什么，但我会将其添加为附加答案以适合代码。）

继续我之前的回答，所有变量都像以前一样声明：

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 />');
}
于 2012-02-03T20:29:29.143 回答