Как управлять порядком слоев на карте в d3js

Question

У меня есть простой вопрос о создании карт с d3js. Я хочу сделать карту с двумя слоями. Один слой - это контур карты (geoJson), а другой слой содержит улицы (topoJson). Моя проблема заключается в том, что слой улиц всегда загружается перед слоем контура, независимо от того, какой из них написан в коде. Мне хотелось бы иметь обратную ситуацию: контурный слой перед улицами. Я думаю, что эта проблема возникает, потому что оба запроса асинхронны, а слой контура загружен раньше, потому что он самый легкий.

Вот код ...

//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", function(error, topology) { 


       svg.selectAll("path") 
        .data(topojson.feature(topology, topology.objects.layer1).features) 
        .enter() 
        .append("path") 
        .attr("d", path) 
        .style("fill", "white") 
        .style("stroke", "#cccccc"); 

      }); 

      //Load in GeoJSON data 
      d3.json("contour.geojson", function(json) { 

       //Bind data and create one path per GeoJSON feature 
       svg.selectAll("path") 
        .data(json.features) 
        .enter() 
        .append("path") 
        .attr("d", path) 
        .style("fill","white") 
        .style("stroke","black") 
        .style("stroke-width",4); 

      }); 

Можно ли нагрузка первый слой улиц, ждать, пока улицы не были нарисованы, а затем загрузить слой контура? Спасибо заранее.

Answer 1

Я бы создал два отдельных элемента g для слоев в начале. Таким образом, вы можете контролировать их порядок:

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")... 
});