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.