Это не вопрос относительно «лучших» альтернатив, а более актуальных / поддерживаемых альтернатив.
Я хочу реализовать обновленную живую анимацию рейтинга для системы голосования по списку песен. Сейчас я не большой фронтмен, но несколько человек сделали то, что я искал в прошлом, тот, который в основном делает то, что я хочу, вот этот:
Codepen
<script>
var app;
window.addEventListener('DOMContentLoaded', function () {
app = new RankingApp('#ranking').start();
});
// {{{ !Demo
var timer1, timer2,
CHARS = [
'lorem ipsum'
];
function stop() {
clearInterval(timer1);
clearInterval(timer2);
}
function rand (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randElm(array) {
return array[rand(0, array.length - 1)];
}
function createRandomItem() {
var i = 0, iz = 0,
userName = '',
item = new RankingItem();
item.userId = rand(1, 0xFFFF);
for (i = 0, iz = rand(4, 12); i < iz; ++i) {
userName += randElm(CHARS);
}
item.userName = userName;
item.score = rand(0, 99);
return item;
}
setTimeout(function () {
var i = 0, iz = 0;
for (i = 0, iz = rand(4, 8); i < iz; ++i) {
app.ranking.insert(
createRandomItem(),
rand(1, app.ranking.items.length + 1)
);
}
timer1 = setInterval(function () {
if (!app.ranking.items.length) { return; }
app.ranking.move(
randElm(app.ranking.items),
rand(1, app.ranking.items.length)
);
randElm(app.ranking.items).score = rand(0, 99);
}, 1009);
timer2 = setInterval(function () {
app.ranking.move(
randElm(app.ranking.items),
rand(1, app.ranking.items.length)
).move(
randElm(app.ranking.items),
rand(1, app.ranking.items.length)
);
randElm(app.ranking.items).score = rand(0, 99);
randElm(app.ranking.items).score = rand(0, 99);
if (app.ranking.items.length <= 1 || app.ranking.items.length <= 99 && rand(0, 1)) {
app.ranking.insert(
createRandomItem(),
rand(1, app.ranking.items.length)
);
}
if (app.ranking.items.length >= 100 || app.ranking.items.length >= 2 && rand(0, 1)) {
app.ranking.remove(randElm(app.ranking.items));
}
}, 3001);
}, 500);
// }}} !Demo
Тем не менее, это довольно старый код, и в какой-то момент он начинает глючить. Другие редкие альтернативы, которые я нахожу через поисковые системы, также датированы 2011/2012. Поскольку я надеюсь запустить это приложение еще на несколько лет, я бы предпочел что-то более свежее или обновленное, желательно с более новой версией, например, jQuery.
Я смотрел на диаграммы D3, но ни один из них, похоже, не занимал ранжирование, как в примере выше. Будем весьма благодарны за любые альтернативы.