#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">