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


Tags: css,d3.js,svg,shapefile,topojson

Problem :

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 ?



Solution :

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.


    CSS Howto..

    How to add event handlers to DIVS with CSS classes containing a particular string?

    how to fix menu bar css-adapter stuffs with IE

    How can I get the body to continue look the same when a div inside overflows to the right?

    How to apply css to html so that it shows as the style property

    How can I create a pop up like the one Google Calendar uses ?

    How to Slant/Skew only the bottom of the div

    How to center the pagination in jQuery Bootstrap DataTables plugin?

    How to reapply new text format in CSS after removing format initially

    How to style a form action [closed]

    How to render a template with dynamic CSS?

    How to give multiple arguments to find element by css selector

    Divs showing and then hiding on page load

    How to make a ccs transition only forward

    How do I center text vertically with css [duplicate]

    How to prevent css hover effects executing before you reach the element with your mouse?

    How do I insert a custom font to text with CSS? [duplicate]

    How to collapse div same like facebook chat

    3 column css how to make the columns even?

    How can I make a similar shape to a parallelogram in css?

    css google font how to download and embedd in css to avoid slow load times

    How to add Jquery Mobile effects to dynamically added elements?

    How are media queries counted in IE's CSS selectors limit?

    How to cut divs both ways to keep the objects in center?

    How to use a CSS sprite for a Repeating background image?

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?

    Rails 4 -how to write a view that displays instances in alternating format

    How to add bootstrap css to my Wordpress plugin

    How to give menu sub menu options

    css: how to center box div element directly in center?