Question

我正在开发一个项目，我需要为滑块计算一些比例。用户可以定义min，max和step。您可以在下面找到以下代码：

var j = Math.round(cfg.max / cfg.step);
var l = (containerWidth / (j - 1));
for (var i = 0; i < j; i++) {
  s.push('<span style="left:');
  s.push(l * i);
  s.push('px">');
  s.push(cfg.step * (i + 1));
  s.push('</span>');
}

Example: min=1 max=12 step=3
Generated scale: 3  6  9  12
Slider ticks:    1 4 7 10 12

我想知道如何为滑块生成刻度。

Answer 1

假设您的问题可以这样重写：

为min x 和max y
计算任意范围的 n 标记

然后我们可以调整linear tick function from D3.js：

function calculateTicks(min, max, tickCount) {
    var span = max - min,
        step = Math.pow(10, Math.floor(Math.log(span / tickCount) / Math.LN10)),
        err = tickCount / span * step;

    // Filter ticks to get closer to the desired count.
    if (err <= .15) step *= 10;
    else if (err <= .35) step *= 5;
    else if (err <= .75) step *= 2;

    // Round start and stop values to step interval.
    var tstart = Math.ceil(min / step) * step,
        tstop = Math.floor(max / step) * step + step * .5,
        ticks = [];

    // now generate ticks
    for (i=tstart; i < tstop; i += step) {
        ticks.push(i);  
    } 
    return ticks;
}

这不完全符合您的规格 - 它会生成一组精美的圆形刻度，通常比tickCount多1-2个：

calculateTicks(1, 12, 5); // [2, 4, 6, 8, 10, 12]
calculateTicks(0, 12, 4); // [0, 5, 10]

这里很难找到最佳解决方案，但我认为D3方法做得相对较好 - 在我看来，我宁愿让2, 4, 6, 8, 10, 12的范围1-12而不是勾选你建议的1, 4, 7, 10, 12。

工作小提琴：http://jsfiddle.net/nrabinowitz/B3EM4/

生成轴刻度

1 个答案: