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

Question

I just added French rivers_lines to my D3js generated SVG. It now display a result like :

I need to keep the river lines without the artifact.

Data : a topojson made of arcs.

CSS code:

.rivers { 
  fill: none;
  fill-opacity: .1;
  stroke-width:1px;
  stroke: #C6ECFF;
 }

same result with some colors and opacity near zero:

 fill: #FF0000;
 fill-opacity: .1;

D3 code:

    rivers = topojson.feature(fra, fra.objects.rivers),

    //Append rivers
    svg.append("path")
        .datum(rivers)
        .attr("d", path)

    svg.selectAll(".rivers")
        .data(topojson.feature(fra, fra.objects.rivers).features)
      .enter().append("path")
        .attr("class", function(d) { return "rivers"; })
        .attr("data-name-en", function(d) { return d.properties.name; })
        .attr("d", path);

My full fiddle is temporarily here.

How to fix that ?

Answer 1

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.