1

最初に 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
4

1 に答える 1

1

最初にグリッドを描画している場合、最初のフィーチャは表示されませんpath。これは、グリッドがそのうちの s を選択しているためです。これは、最初のデータ要素 (つまり、最初の特徴) が既存のパスに一致し、.enter()選択の一部ではないことを意味します。

これを修正するには、機能にクラスを割り当て、pathそれに応じて選択するだけです。

aSVG.selectAll("path.feature")
    .data(json.features)
    .enter()
    .append("path")
    .attr("class", "feature")
    .attr("d", path);
于 2013-09-26T15:57:20.423 に答える