How to control the order of the layers on a map in d3js

Question

I have a simple question about making maps with d3js. I want to make a map with two layers. One layer is the contour of the map (geoJson) and the other layer contains the streets (topoJson). My problem is that streets layer always is loaded in front of the layer of contour, no matter which one is written before in the code. I would like the opposite situation: the contour layer in front of the streets. I think this problem happen because both request are asynchronous and the contour layer is loaded before because is the lightest. Here is the code... ``` //Width and height var w = 900; var h = 500; //Define map projection var projection = d3.geo.transverseMercator() .center([2.5, -34.65]) .rotate([61.5, 0]) .scale((h * 750.5) / 3) .translate([(w/2), (h/2)]); //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load in TopoJSON data d3.json("streets.json", functio…

Accepted Answer

I would create two separate `g` elements for the layers in the beginning. This way you can control their order:

```
var countourG = svg.append("g"),
    streetG = svg.append("g");

d3.json("streets.json", function(error, topology) {
  streetG.selectAll("path")...
});

d3.json("contour.json", function(error, topology) {
  contourG.selectAll("path")...
});
```

How to control the order of the layers on a map in d3js

Solution

Problem