D3js SVG开放行显示填充神器，如何修复？

Question

我刚刚将法语rivers_lines添加到我的D3js生​​成的SVG中。它现在显示如下结果：

我需要保留没有神器的河流。

数据：由弧形构成的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);

我的full fiddle is temporarily here。

如何解决？

Answer 1

你有一条没有任何风格的路径，似乎是所有黑色区域的来源。它发生在湖泊小径和河道之间。

它看起来像这样，但它要大得多：

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

如果您使用Firefox并使用其DOM Inspector，您可以指向屏幕上的某个位置，它会突出显示该元素，以便您找到导致问题的元素。