D3js SVG открытые строки отображают артефакт заполнения, как это исправить?

Я только что добавил французские rivers_lines в SVG, сгенерированный D3js. Теперь он отображает результат как:

Мне нужно держать речные линии без артефактов.

Данные: топойсон из дуг.

Код 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);

мойполная скрипка временно здесь.

Как это исправить?

Ответы на вопрос(1)

Ваш ответ на вопрос