D3添加经纬网和GeoJSON的(D3 add graticule and geojson)

当第一次添加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，它的网格是一个。 这意味着，所述第一数据元素（即，第一特征）被匹配到现有的路径，而不是的一部分.enter()的选择。

为了解决这个问题，一个简单的类分配给您的特性path S和相应的选择：

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

文章来源: D3 add graticule and geojson