css - 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，您可以指向屏幕上的某个位置，它会突出显示该元素，以便您可以找到导致问题的元素。