D3添加刻度和geojson答案

【问题标题】：D3 add graticule and geojsonD3添加刻度和geojson
【发布时间】：2013-09-26 15:51:11
【问题描述】：

当先添加 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

【问题讨论】：

标签： json d3.js geojson geomap

【解决方案1】：

如果您先绘制网格，则第一个功能不会显示，因为您选择了paths，其中网格就是其中一个。这意味着第一个数据元素（即第一个特征）与现有路径匹配，而不是 .enter() 选择的一部分。

要解决此问题，只需为您的功能 paths 分配一个类并相应地选择：

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

【讨论】：