D3 рендеринг SVG-диаграммы только при переходе назад или вперед на страницу

Question

В моем локальном режиме D3 отображает диаграмму SVG только при переходе на страницу или назад к ней. Не отображается при начальной загрузке страницы.

Следуя инструкциям по D3 здесь Я могу получить диаграмму для идеального отображения в коде или при возврате на страницу.

Я запускаю страницу, используя приложение Django для создания плоских страниц. Я пробовал несколько браузеров и инструментов разработчика. Страница не возвращает ошибок и данные загружаются до вызова функции создания диаграммы.

Есть ли способ отладки D3 или функции Javascript, который мне не хватает?

Я подозреваю, что это как-то связано с асинхронностью, и мне нужно добавить window.onload, как показано ниже, но пока это не сработало.

document.addEventListener("DOMContentLoaded", function(event) {
    fetch(api)
        .then(function(response) { return response.json(); })
        .then(function(data) {
            var parsedData = parseData(data);
            window.onload = function() {
                drawChart(parsedData);
            }
        })
        .catch(function(err) { console.log(err); })
    });

Заранее спасибо за любую помощь.

Answer 1

Оказывается, что ошибка не была связана, это не было асинхронной проблемой.Fontawesome ранее добавлял svg на страницу, что вызывало проблемы с моей функцией рисования диаграмм JavaScript.Чтобы исправить это, я должен был изменить то, что d3 выбирал из 'svg' для определенного класса.