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);