6

d3js を使用したマップの作成について簡単な質問があります。2 つのレイヤーでマップを作成したいと考えています。1 つのレイヤーは地図の等高線 (geoJson) で、もう 1 つのレイヤーには道路 (topoJson) が含まれます。私の問題は、コードでどちらが前に書かれているかに関係なく、道路レイヤーが常に等高線のレイヤーの前にロードされることです。私は反対の状況を望みます: 通りの前の等高線レイヤー。この問題は、両方のリクエストが非同期であり、最も軽いために輪郭レイヤーが前にロードされるために発生すると思います。

これがコードです...

//Width and height
            var w = 900;
            var h = 500;

            //Define map projection
            var projection = d3.geo.transverseMercator()
                                   .center([2.5, -34.65])
                                   .rotate([61.5, 0])
                                   .scale((h * 750.5) / 3)
                                   .translate([(w/2), (h/2)]);

            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Load in TopoJSON data
            d3.json("streets.json", function(error, topology) {


                svg.selectAll("path")
                   .data(topojson.feature(topology, topology.objects.layer1).features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "white")
                   .style("stroke", "#cccccc");

            });

            //Load in GeoJSON data
            d3.json("contour.geojson", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill","white")
                   .style("stroke","black")
                   .style("stroke-width",4);

            });

最初に道路のレイヤーをロードし、道路が描画されるまで待ってから輪郭のレイヤーをロードすることは可能ですか? 前もって感謝します。

4

1 に答える 1

9

最初に、レイヤー用に2 つの個別gの要素を作成します。このようにして、それらの順序を制御できます。

var countourG = svg.append("g"),
    streetG = svg.append("g");

d3.json("streets.json", function(error, topology) {
  streetG.selectAll("path")...
});

d3.json("contour.json", function(error, topology) {
  contourG.selectAll("path")...
});
于 2014-02-04T09:31:51.900 に答える