Javascript 城市点位于d3世界城市地图的世界地图后面

我正在尝试在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");

var列=[]；
var measureArray=[]；
列。推送（“城市”）；
measureArray.push（“客房收入”）；
var maxMap={}；
var minMap={}；
for（var num=0；num

---

感谢您的帮助，Thanx看起来像是圆的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");

---

谢谢Gilsha…我已经试过了，但在这种情况下，圆点根本就不会出现！！！浏览器控制台上也没有错误。知道会发生什么吗？@ValarDohaeris我已经做了一个决定。它起作用了。试一试。非常感谢……非常感谢你的帮助：）谢谢你，瓦拉多哈利斯。很高兴这有帮助：）