Question

我有一个关于用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);

            });

是否有可能首先加载街道层，等到街道被绘制然后加载轮廓层？提前谢谢。

Answer 1

我会在开头为图层创建两个单独的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")...
});

如何在d3js中控制地图上图层的顺序

1 个答案: