Странный эффект заливки при рендеринге данных железной дороги в d3

Я получаю странные результаты от использования d3 для рендеринга GeoJSON данных о железной дороге. Файл очень большой, 38 МБ, поэтому я включаю одну его часть: https://gist.github.com/amiri/8202105.

Вот мой код: https://gist.github.com/amiri/8202126

Конечно, самое главное — это последние строчки внизу.

Я вижу формы, но линии не нарисованы должным образом. Скорее, между точками отрезков прямой происходит какое-то заполнение. Вот скриншот:

http://snag.gy/n2A2W.jpg

Кто-нибудь знает, что происходит? Я преобразовал данные в topojson, чтобы посмотреть, может ли это решить мою проблему, но получил те же результаты. Возможно, это проблема CSS?


javascript css d3.js geojson cartography
person Amiri Barksdale    schedule 31.12.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вероятно, это проблема стиля/css.

Попробуйте установить для заливки значение none на пути.

path {
    fill: none;
    stroke: black;
    stroke-linejoin: round;
    stroke-width: 1.0;
}

или что-то типа того. Вероятно, вы также хотите добавить класс к пути, чтобы ваш селектор css мог быть специфичным для пути железной дороги (не уверен, что для этого предназначен класс «железнодорожная линия»).

person reblace    schedule 31.12.2013
comment
Даже с этим изменением пути, вероятно, останутся замкнутыми петлями без заполнения. Что-то не так с написанным svg. - person Lokno; 01.01.2014
comment
reblaze: Большое спасибо! Я добавил стиль, который вы мне дали, в класс .rail-line, и это сделало это. Ух ты. Так просто. Спасибо. - person Amiri Barksdale; 01.01.2014
comment
Просто чтобы исправить комментарий @Lokno, шаблон заполнения, который вы наблюдали, соответствует спецификациям заполнения открытого пути: Операция заполнения заполняет открытые вложенные пути, выполняя операцию заполнения, как если бы к пути была добавлена ​​дополнительная команда closepath для соединения последней точки вложенного пути с первой точкой вложенного пути. Таким образом, операции заливки применяются как к открытым подконтурам в элементах «пути» (т. е. к подконтурам без команды «закрыть путь»), так и к «ломаным» элементам. - person AmeliaBR; 01.01.2014
comment
У меня была та же проблема, связанная с диаграммами Санки и ее путями. Поведение браузерного рендеринга правильное, но сам стандарт svg здесь нелогичен. Почему открытый путь должен быть заполнен по умолчанию? Но хорошо, что вопрос был задан. +голосовать за вопрос и ответ. - person VividD; 01.01.2014