CODEWITHSUNDEEP
cssd3.jssvgshapefiletopojson
Hugolpz
Hugolpz

Reputation: 18258

D3js SVG open lines display a fill artifact, how to fix it?

I just added French rivers_lines to my D3js generated SVG. It now display a result like :enter image description here

I need to keep the river lines without the artifact.

Data : a topojson made of arcs.

CSS code:

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

same result with some colors and opacity near zero: 

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

D3 code:

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

My full fiddle is temporarily here.

How to fix that ?

Upvotes: 2

Views: 645

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You have a path without any style which seems to be the source of all the black areas. It occurs just between the lakes paths and the rivers paths.

And it looks like this but it's much much bigger:

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

If you use Firefox and use its DOM Inspector you can point to a place on the screen and it will highlight the element so you can find the one which is causing an issue.

Upvotes: 3

Related Questions