d3.js - Artifacts in Natural Earth Data railroad map -

i ran through mike bostock's let's make map tutorial , pleased results decided add railroad data natural earth data set.

most of renders okay, there crazy artifacts seems unrelated meshes somehow being connected together:

https://docs.google.com/file/d/0b6e2ropuwmtea3d4ennjy3dsbkk/edit?usp=sharing

i separated rail data 3 files see if fix problem:

for country in can mex usa     ogr2ogr -f geojson \     -where "sov_a3='${country}'" \     railroads_${country}.json ne_10m_railroads_north_america.shp done 

i'm rendering them using topojson.mesh follows:

svg.append("path")   .datum(topojson.mesh(na, na.objects.railroads_usa))   .attr("d", path)   .attr("class", "railroad_usa"); svg.append("path")   .datum(topojson.mesh(na, na.objects.railroads_can))   .attr("d", path)   .attr("class", "railroad"); svg.append("path")   .datum(topojson.mesh(na, na.objects.railroads_mex))   .attr("d", path)   .attr("class", "railroad"); 

otherwise code virtually identical provided in demo.

how can rid of these straight lines?

the solution create separate path each railroad. single file sufficient:

ogr2ogr -f geojson \     -where "sov_a3 in ('can', 'mex', 'usa')" \     railroads.json ne_10m_railroads_north_america.shp 

instead of creating single mesh, multiple paths can created follows:

svg.selectall(".railroad")   .data(topojson.feature(na, na.objects.railroads).features) .enter().append("path")   .attr("class", function(d) { return "railroad " + d.id; })   .attr("d", path);