d3.js(maps) svg elements not appearing when adding them on top of existing svg elements

Question

I'm using GeoJson files to draw d3 map polygons on an svg object.

As such :

var g = svg.append("g")
                       .style("stroke-width", "1.5px");

d3.json(file, function (error, json) {

                    g.selectAll("path")
                        .data(json.features)
                        .enter()
                        .append("path")
                        .attr("class", function (d) {
                            return "subunit " + d.properties.id + " feature";
                        })
                        .attr("d", path)
                        .on("click", clicked);
                });

So for example sake lets say this is drawing the map of the UK with Countries view.

I have a GeoJson file that (file 2) that covers the regions inside England. So I have a clicked function as you can see which I process (.on("click", clicked). In the clicked function I process the second geojson file and try to append all of it's polygons (which are its regions) onto the England country. I read somewhere that svg orders elements based on when they are populated. I've been inspecting into the elements and my region elements are definitely showing up after the full UK maps elements. They just won't appear.

What I've tried :

I've tried to set the opacity of the previous svg object (England) to 0. I've tried to completely remove it but no luck. The new polygons just won't show. Here is how I'm trying to add them over.

                        var region = svg.append("region");

                    d3.json(scope.json.england_regions, function (error, json) {

// Set the opacity of the England country to 0
                        d3.select("path").style("opacity", 0); 
                        console.log(json);

                        region.selectAll("path")
                            .data(json.features)
                            .enter()
                            .append("path")
                            .attr("class", function (e) {
                                console.log(e);
                                return "region " + e.properties.id + " feature";
                            })
                            .attr("d", path)
                            .on("click", function (e) {
                                reset();

                            });

                    });
                }

I've been debugging the geojson (the 2nd geojson file) to ensure that it definitely gets populated. Heck if I load it on its own it works fine. I can see all the polygons from the England regions file.

Has anyone else had this issue? I've tried searching for some similar scenarios but I can't seem to find where other people are trying to do this.

Answer 1

A path element is not a container and cannot have graphical (path) children. You need to make the new path elements siblings of the existing path elements.

Answer 2

I was unclear on how the .enter() method in d3.js was working. As I mention in the comment in Robert Longson's answer when I was adding my new paths to the existing g element it was cutting off the first 4 elements and only showing some of them. That is because the .enter() works by comparing keys.

To fix it I had to do .selectAll() so that .enters wasn't comparing it to the existing paths.

More information on .enter() .append() where I figured this out from at : http://knowledgestockpile.blogspot.co.uk/2012/01/understanding-selectall-data-enter.html