D3添加網格和幾何圖形

Question

當首先添加D3網格圖然後調用d3.json時，json中的第一個特徵不會顯示在地圖上。如果我在添加路徑後在d3.json中添加d3.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 s，它的網格是一個。這意味着第一個數據元素（即第一個特徵）與現有路徑匹配，而不是選擇的一部分。

爲了解決這個問題，一個簡單的類分配給您的功能path S和相應的選擇：

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