城市点出现在d3世界城市地图的世界地图后面

City dots are coming behind world map in World City Map in d3

本文关键字:城市地图 世界地图 世界 d3 城市      更新时间:2023-09-26

我试图在d3中创建一个世界地图。地图应该显示与不同城市相关的数据。城市在地图上用红圈标出。

我能完成它的大部分。我面临的唯一挑战是城市点(红色圆圈)在地图后面。我可以在firefox的inspect元素中看到它们,但由于它们被打印在地图后面,所以不可见。

我在一个博客上读到这个问题,我应该在世界数据的加载方法中加载城市数据。我做了,但到目前为止没有任何帮助。这是我的代码-

var columns = [];
    var measureArray = [];
    columns.push("city");
    measureArray.push("Room Revenue");
    var maxMap = {};
    var minMap = {};
    for (var num = 0; num < measureArray.length; num++) {
        var measureData = [];
        for (var key in data) {
            measureData.push(data[key][measureArray[num]]);
        }
        maxMap[measureArray[num]] = Math.max.apply(Math, measureData);
        minMap[measureArray[num]] = Math.min.apply(Math, measureData);
    }
    parent.$("#maxMap").val(JSON.stringify(maxMap));
    parent.$("#minMap").val(JSON.stringify(minMap));

    var width = $(window).width()-170;
    var height = $(window).height();
    var projection = d3.geo.mercator();
    //            .center([-20, 60])
    //            .scale(150);
    var path = d3.geo.path()
    .projection(projection);
    var svg = d3.select("#"+divID)
    .append("svg")
    .attr("width", width)
    .attr("height", height);
    var g = svg.append("g");
    var colorMap = {};
    var ctxPath=$("#ctxpath").val();
    d3.json(ctxPath+"/JS/world-topo-min.json", function(error, world) {
        var data = [
        {
            "city": "ZANZIBAR",
            "Room Revenue": "1000",
            "lat":"-6.13",
            "lon":"39.31"
        },
        {
            "city": "TOKYO",
            "Room Revenue": "900",
            "lat":"35.68",
            "lon":"139.76"
        },
        {
            "city": "AUCKLAND",
            "Room Revenue": "1500",
            "lat":"-36.85",
            "lon":"174.78"
        },
        {
            "city": "BANGKOK",
            "Room Revenue": "2500",
            "lat":"13.75",
            "lon":"100.48"
        },
        {
            "city": "DELHI",
            "Room Revenue": "2500",
            "lat":"29.01",
            "lon":"77.38"
        }
        ];
        g.selectAll("circle")
        .data(data)
        .enter()
        .append("a")
        .attr("xlink:href", function(d) {
            return "https://www.google.com/search?q="+d.city;
        }
        )
        .append("circle")
        .attr("cx", function(d) {
            return projection([d.lon, d.lat])[0];
        })
        .attr("cy", function(d) {
            return projection([d.lon, d.lat])[1];
        })
        .attr("r", 5)
        .style("fill", "red");
        g.selectAll("path")
        .data(topojson.feature(world, world.objects.countries).features)
        //          .geometries)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill", function(d, i) {
            return "white";
        });
        parent.$("#colorMap").val(JSON.stringify(colorMap));
    })

    var zoom = d3.behavior.zoom()
    .on("zoom", function() {
        g.attr("transform", "translate(" +
            d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
        g.selectAll("path")
        .attr("d", path.projection(projection));
    });
    svg.call(zoom);
    d3.select(self.frameElement).style("height", height + "px");

任何帮助都是感激的,谢谢

似乎圆圈的dom元素在路径元素后面。您只需要更改附加元素到文档的顺序。先添加绘制地图的路径,再添加圆点。

 g.selectAll("path") //Appending paths first
     .data(topojson.feature(world, world.objects.countries).features)
     .enter()
     .append("path")
     .attr("d", path)
     .style("fill", function(d, i) {
          return "white";
     });
g.selectAll("circle")  //Now appending circles
    .data(data)
    .enter()
    .append("a")
    .attr("xlink:href", function(d) {
        return "https://www.google.com/search?q="+d.city;
    }
    )
    .append("circle")
    .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
    })
    .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
    })
    .attr("r", 5)
    .style("fill", "red");