Построение jsfiddle с использованием библиотеки c3 d3 - как получить плавный рендеринг и правильно отобразить Nth%

Question

Я использую следующий jsfiddle URL для проверки библиотеки C3 (зависит от D3 ) и пытаюсь отобразить данные в датчик график (ищите кнопку Выполнить - слева в браузере).

http://jsfiddle.net/7kYJu/4742/

JavaScript код, который я тестирую, таков:

var chart = c3.generate({
    data: {
        columns: [
            ['data', 1 ] // this will start the progress from 1%
        ],
        type: 'gauge',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    gauge: {
//        label: {
//            format: function(value, ratio) {
//                return value;
//            },
//            show: false // to turn off the min/max labels.
//        },
//    min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
//    max: 100, // 100 is default
//    units: ' %',
    width: 25 // for adjusting arc thickness
    },
    color: {
        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
        threshold: {
//            unit: 'value', // percentage is default
//            max: 200, // 100 is default
            values: [30, 60, 90, 100]
        }
    },
    size: {
        height: 250
    }
});

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

  //for (i = 1; i < 100; i++) {    
  for (i = 1; i < 100; i+=0.01) {
    sleep(5).then(() => {
        //do some stuff
        setTimeout(function () {
            chart.load({
                columns: [['data', i ]] // This line doesn't work 
                //columns: [['data', Math.floor(Math.random() * 99) ]] // This line works when un-commented for showing the correct Nth % on the gauge chart
            });

        }, 0);
    })
}    



/* 
!!!! IGNORE the following example code !!!!
setTimeout(function () {
    chart.load({
        columns: [['data', 50]]
    });
}, 2000);

setTimeout(function () {
    chart.load({
        columns: [['data', 70]]
    });
}, 3000);

setTimeout(function () {
    chart.load({
        columns: [['data', 0]]
    });
}, 4000);

setTimeout(function () {
    chart.load({
        columns: [['data', 100]]
    });
}, 5000);

*/

Мои вопросы:

1. Почему число% не увеличивается от 1 до следующего числа (за уровень 5 микросекунд), которое я упомянул в sleep (), или что, если я передам то же значение, то есть 5 микросекунд, последнему аргументу функции setTimeout.

   Я замечаю, что значение 1% переходит на конечное число (что вы указываете в условном блоке оператора if (в этом коде это 100). Если я поставлю i < 50, он останавливается там, как и ожидалось но он не показывает процент на диаграмме датчика, увеличивая его 1 на 1 или 1, затем 1.001, затем 1.002 (я пытался изменить 3-й раздел в выражении if как i++), не изменился Что-нибудь в рендеринге.

2. Как получить плавный рендеринг с интервалами уровня полсекунды или 100-300 микросекунд, т. е. полоса на шкале датчика будет плавно увеличиваться, тогда как <N> % увеличивается, отражая то же самое. Я заметил, тогда даже при том, что индикаторная полоса увеличилась около 30% (если i < 100), и процент показывает 100%. Также рендеринг иногда выглядит гладко, но повторный запуск того же кода иногда выглядит как быстрый fla sh.

3. Я не уверен, стоит ли мне использовать sleep(n microsecond), если я уже использую setTimeout, последний параметр которого делает то же самое (в вызове asyn c). Как сделать его не асинхронным c, т. Е. Как я могу спать в не асинхронном режиме c или иметь функцию сна всего 1 секунду или 0,1 секунды на каждую итерацию в течение для l oop?

4. Почему следующая строка (без комментариев) РАБОТАЕТ !! для пункта 1 пули.

//columns: [['data', Math.floor(Math.random() * 99) ]] // This line works when un-commented for showing the correct Nth % on the gauge chart