D3 add graticule и geojson

Question

При добавлении D3 graticule сначала, а затем при вызове d3.json, самая первая функция в json не отображается на карте. Если я добавлю d3.graticule в d3.json после добавления путей, graticule будет нарисован поверх функций, чего я не хотел. Вот мой JavaScript файл:

$(document).ready(function(){ 

$('.aToolTip').tooltip(); 
$('.aPopOver').popover(); 

// D3 Mapping Starts Here 
var h = $('#myMap').height(); 
var w = $('#myMap').width(); 

console.log("h = " + h , ", w = " + w); 

$('svg').attr('width', w) 
     .attr('height', h); 

var aSVG = d3.select("#aSVGElement"); 

var aProjection = d3.geo.mercator() 
        .rotate([-135, 24]) 
        .scale(600) 
        .translate([w/2, h/2]); 

var path = d3.geo.path() 
       .projection(aProjection); 

var graticule = d3.geo.graticule() 
        .step([10, 10]); 

aSVG.append("path") 
     .datum(graticule) 
     .attr("class", "graticule") 
     .attr("d", path); 

d3.json("js/Australia.json", function(error, json){ 

    aSVG.selectAll("path") 
     .data(json.features) 
     .enter() 
     .append("path") 
     .attr("d", path);  

}); // end d3.json 

});// end document ready 

Answer 1

Первая функция не отображается, если вы рисуете сетку первой, потому что вы выбираете path с, из которых сетка один. Это означает, что первый элемент данных (т. Е. Первый признак) сопоставляется с существующим путем, а не частью выбора .enter().

Чтобы исправить это, просто присвоить класс в функции path с и выберите соответственно:

aSVG.selectAll("path.feature") 
    .data(json.features) 
    .enter() 
    .append("path") 
    .attr("class", "feature") 
    .attr("d", path);