Блог

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

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

Я запускаю страницу с помощью приложения flatpages от 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); })
    });
 

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

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