6

我有一个关于使用 d3js 制作地图的简单问题。我想制作一个有两层的地图。一层是地图的轮廓（geoJson），另一层包含街道（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

我会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 回答