D3Js Svg Open Lines Display a Fill Artifact, How to Fix It

D3js SVG open lines display a fill artifact, how to fix it?

You have a path without any style which seems to be the source of all the black areas. It occurs just between the lakes paths and the rivers paths.

And it looks like this but it's much much bigger:

<path d="M254.68465149579959,297.3979576500094L252.63102536206452,297.7622166535384L251.8095749085707,297.7622166535384...

If you use Firefox and use its DOM Inspector you can point to a place on the screen and it will highlight the element so you can find the one which is causing an issue.

TopoJSON with strange paths

Already found the problem. I had a topojson.mesh layer with class .country-boundaries above the country layer, and this mesh had still a fill color defined. So I had to set

.country-boundaries { fill: none; }

Artifacts in Natural Earth Data railroad map

The solution is to create a separate path for each railroad. A single file is sufficient:

ogr2ogr -f GeoJSON \
    -where "sov_a3 in ('CAN', 'MEX', 'USA')" \
    railroads.json ne_10m_railroads_north_america.shp

Instead of creating a single mesh, multiple paths can be created as 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);

Strange Fill Effect When Rendering Railroad Data in d3

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).

topojson.mesh outputting incorect path? (stroke-dasharray)

Bug actually due to `style="stroke-dasharray:4,4;" on Chrome browser. "stroke-dasharray:x,y;" mess up svg path? (Chrome).

stroke-dasharray:x,y; mess up svg path? (Chrome)

This is a known bug in Chrome:

https://code.google.com/p/chromium/issues/detail?id=364866

Edit > Fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=364866

---

Related Topics