Why does the whole SVG disappear when I set map opacity to 0 in D3?

Question

I've created a map in D3 which sits on an svg with a grid pattern (check out the gist block here — click "ranks" and "pop" to transition)). I've marked some cities using circles, and have a button to transition from a map to a graph, while keeping the circles visible.

To create the grid background, I used the following HTML to set up my SVG (code from this post):

<div id ="bck" style="width:700px;height:500px">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
                <path d="M 8 0 L 0 0 0 8" fill="none" stroke="lightblue" stroke-width="0.5"/>
              </pattern>
              <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
                <rect width="80" height="80" fill="url(#smallGrid)"/>
                <path d="M 80 0 L 0 0 0 80" fill="none" stroke="lightblue" stroke-width="0.5"/>
              </pattern>
            </defs>

            <rect width="100%" height="100%" fill="url(#grid)" />
          </svg>
        </div>

I appended the map to this SVG, thus:

var svg = d3.select("body").select("svg");
svg.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    .attr({
                        "fill": "#B0B0B0",
                        "stroke": "White",
                        "stroke-width": 0.3,
                        "opacity": 1
                    });

When it comes to transitioning this map out and leaving the circles on the gridded background, I struggle — when I tried to remove the map alone but leave the grid, the grid disappears too, although the circles stay:

        d3.selectAll("path")
            .transition()
            .delay(10)
            .duration(1000)
            .attr({
                "stroke-width": 0,
                "opacity": 0
            });

Why does the grid also disappear, rather than just the "path" that represents the map? How can I maintain the grid I've got in the background while fading the map out, and keeping the circles visible too?

EDIT: I know the initial grid setup is kind of messy — I couldn't figure out how to do this in JS. If you've got any suggestions, I'd love to hear them and simplify the HTML.

Answer 1

The patterns contain path elements. When you select all the paths you get the ones in the pattern too and thus the pattern becomes invisible hence the grid filled with the pattern becomes invisible too.

You need to fix the selector not to select paths within the pattern. Maybe you could give some of the paths a class and select the appropriate paths by class.