css - D3js SVG の開いた行に塗りつぶしアーティファクトが表示されます。修正方法は?

Question

D3js で生成された SVG にフランスの rivers_lines を追加しました。次のような結果が表示されます。

アーティファクトなしで川のラインを維持する必要があります。

Data : 円弧で構成された topojson。

CSS コード:

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

一部の色とゼロに近い不透明度で同じ結果:

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

D3 コード:

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

私の完全なフィドルは一時的にここにあります。

それを修正する方法は？