D3添加标线和geojson [英] D3 add graticule and geojson

问题描述

当先添加D3刻度线然后调用d3.json时，json中的第一个功能不会显示在地图上.如果我在添加路径后在d3.json中添加d3.graticule，则将在功能之上绘制网格，这不是我想要的.这是我的JavaScript文件:

When adding D3 graticule first and then calling d3.json , the very first feature within json doesn't show on the map. If I add d3.graticule within d3.json after appending paths, graticule will be drawn on top of the features, which is not what I wanted. Here is my JavaScript file:

$(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 

推荐答案

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

The first feature doesn't show up if you're drawing the grid first because you're selecting paths, of which the grid is one. This means that the first data element (i.e. the first feature) is matched to the existing path and not part of the .enter() selection.

要解决此问题，只需为您的功能path s分配一个类，然后进行相应选择:

To fix this, simply assign a class to your feature paths and select accordingly:

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

这篇关于D3添加标线和geojson的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！