Анимировать сюжет на создание

Question

Я пытаюсь анимировать гистограмму всякий раз, когда она создается как диаграмма. js (см. этот пример ). На данный момент мне удалось заставить его работать с помощью метода .animate(), но с помощью обходного пути:

1. Создать график со значениями y, установленными в нули
2. Анимируйте переход к реальным значениям, используя .animate()

. Хотя это работает, возникает проблема, когда диапазон оси (особенно оси y) неправильный. Я предполагаю, что диапазоны вычисляются при создании графика, и поэтому в моем случае они рассчитываются на основе массива нулей.

Я работал над этой проблемой, вычисляя свои собственные диапазоны, но я уверен, что есть другой метод (или лучший).

Мой вопрос: это правильный подход? Есть ли лучший способ анимировать графики, чтобы избежать вычисления диапазонов вручную?

Это то, что у меня сейчас есть:

function plotWithAnimate(x, y) {
    // Zeros to set the baseline
    let zeros = new Array(y.length).fill(0);

    // This is a workaround to correctly scale the axis
    let xMin = Math.min(...x) - 1;
    let xMax = Math.max(...x) + 1;
    let yMin = Math.min(...y) - 1;
    let yMax = Math.max(...y) + 1;


    Plotly.newPlot('graph', [{
        x: x,
        y: zeros,
        type: 'bar',
    }], {
        xaxis: {
            range: [xMin, xMax]
        },
        yaxis: {
            range: [yMin, yMax]
        }
    }, {}).then(() => {
        Plotly.animate('graph', {
            data: [{y: y}],
        }, {
            transition: {
                duration: 500,
                easing: 'cubic-in-out'
            }, 
            frame: {
                duration: 500
            }
        });
    });
}