D3 svg rect не отображается в Chrome
Я сделал гистограмму с библиотекой d3 (в основном работающей и тестируемой в firefox), а позже заметил, что атрибуты fill для svg rect в Chrome не отображались, поэтому отображались только оси x и y.
то же самое происходит в сафари iOS (я не могу протестировать так активно, но проверил, происходит ли это исключительно в хроме).
кто-нибудь знает почему это?
намек в правильном направлении все равно будет оценен;
я у стены.
вот ручка.
для уточнения: svg rect в firefox отображается как задумано.
если это ошибка, вот версия каждого браузера, который я использую на текущий момент
почему бы тебе не использовать d3.json?
@ rioV8, парень мой, спасибо; я не знал, что это плохая практика. это решает мою проблему. Я мог бы удалить этот вопрос, учитывая, что он сводится к плохому css, если вам не нужны бесплатные точки доступа в Интернет. Я в основном пробовал следовать документации d3; Вы говорите, что мне не следует использовать d3 cdn и вместо этого использовать локальный файл json?
нет необходимости писать свой собственный XMLHttpRequest, используйте d3.json, который использует Fetch API с обещаниями
@ rioV8 отличный. попробую разобраться. спасибо за указатели.
Ответы 1
Ваш селектор * содержит
width: auto;
height: auto;
Каким-то образом это переопределяет ширину и высоту прямоугольных элементов, хотя этого не должно быть, поскольку прямоугольные элементы имеют атрибуты ширины и высоты. Удалите эти настройки, и все будет отображаться правильно.
именно эти два свойства вызвали проблему; спасибо, что изучили это.
проблема в вашем CSS-селекторе
*. Нет необходимости использовать*, и это как-то не рекомендуется в отношении скорости. Если вы измените*наhtml, вы увидите полосы. Почему вы устанавливаете заливку прямоугольника и в CSS.bar, просто заметил, что это прокомментировано в CSS