диаграмма d3 и шрифт Google не видны на странице github

#jquery #d3.js #github #github-pages #google-font-api

#jquery #d3.js #github #github-страницы #google-font-api

Вопрос:

Я загрузил страницу на Github, и HTML, CSS и Jquery и пользовательский интерфейс Jquery работают очень хорошо. Однако диаграмма d3 не выполняется. (PS: диаграмма скрыта и становится видимой при нажатии на карту в середине. Данные на диаграмме d3 были введены вручную, они не были связаны с внешним файлом данных.)

Вы можете увидеть на исходной странице, нажав на среднюю (черную) карточку.

На странице github, если вы нажмете на среднюю карточку, появится свернутый контейнер css, но без диаграммы :(. На странице Github, в дополнение к проблеме d3, я вижу, что шрифт Google, который я использовал (Lato), также не загружался.

Я новичок в Github, возможно, мне не хватает чего-то очевидного. Я загрузил все это в виде HTML-файла (в отличие от отдельных папок для css и js-скриптов.

Ответ №1:

у вас https проблема (попытка загрузить http ресурсы на https сайт).

Вместо определения протокола как http:// или https:// , на который вы ссылаетесь на свои ресурсы, попробуйте использовать протокол, не зависящий от протокола //

Комментарии:

1. Спасибо! Я только что понял, что это проблема с браузером, но не знал бы, что это http:// vs https:// спасибо 🙂

Ответ №2:

OOOOPS нашел подсказку и (неполный) ответ на мой собственный вопрос: это был мой браузер Chrome. Я пытался выяснить, что происходит, и в моем браузере Chrome появилась надпись «эта страница пыталась загрузить ненадежный скрипт». Я нажал на нее и сказал «да», я хотел бы загрузить ее, и она загрузилась. Появился график. Шрифт по-прежнему не загружается, но это нормально. Это не огромная проблема. (ОБНОВЛЕНИЕ: спасибо Стивену, чей комментарий объяснил, ПОЧЕМУ это произошло.)

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

В любом случае спасибо и, пожалуйста, не обращайте внимания на этот вопрос 🙂

ОБНОВЛЕНИЕ re: Проблема с шрифтом Google: примерно через 2 часа после публикации вопроса я загрузил шрифт в папку; это не сработало.

Затем я вернулся к коду и…ну, это была простая ошибка, которую мне стыдно признать: ( Я неправильно закрыл один тег стиля, поэтому шрифт не читался. Как только я это исправил, все заработало отлично. (Я уже размещал ту же страницу на Tumblr раньше, так что, возможно, у них что-то происходит, когда эти ошибки каким-то образом подбираются и исправляются их системой автоматически).

Теперь все решено 🙂

Ответ №3:

это может быть связано с тем, что страница github использует HTTPS, но URL шрифта — HTTP.

Можете ли вы попробовать изменить URL-адрес, удалив http: вот так ,

 @import url(//fonts.googleapis.com/css?family=Hind:300,500);
  

или

 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Hind:300,500">