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

Question

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

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

Конечно, самый важный бит это последние строки внизу.

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

http://snag.gy/n2A2W.jpg

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

Answer 1

Это, вероятно, проблема стиля / CSS.

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

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

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