Question

I am working on a project where I need to calculate some scale for slider. The user can define min, max and step. You can find the code below:

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

假设你的问题,可以改写如下:

页: 1

然后我们可以调整。

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;
}

This isn t exactly to your specifications - it generates a set of nicely-rounded ticks, often 1-2 more or fewer than tickCount:

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、4、7、10、12。

Working fiddle: http://jsfiddle.net/nrabinowitz/B3EM4/

友情链接