Strange Fill Effect When Rendering Railroad Data in d3

Question

I am getting strange results from using d3 to render a GeoJSON of railroad data. The file is very large, 38M, so I include one piece of it: https://gist.github.com/amiri/8202105.

Here is my code: https://gist.github.com/amiri/8202126

Of course the most important bit is the last lines at the bottom.

I see the shapes, but the lines are not drawn properly. Rather, there is some sort of filling going on between points of the line segments. Here is a screenshot:

http://snag.gy/n2A2W.jpg

Does anyone have any idea what is going on? I converted the data to topojson to see whether that might clear up my problem, but I got the same results. Is this a CSS problem, perhaps?

Answer 1

It's probably a style/css issue.

Try setting the fill to none on the path..

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

or something like that. You prob also want to add a class to the path so your css selector can be specific to the railroad path (not sure if that's what the "rail-line" class is for).