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

我的完整小提琴暂时在这里。

如何解决？

Answer 1

您有一条没有任何样式的路径，这似乎是所有黑色区域的来源。它发生在湖泊路径和河流路径之间。

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

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

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