javascript - d3 世界城市 map 中的城市点出现在世界地图后面

Question

我正在尝试在 d3 中创建世界地图。 map 应显示与不同城市相关的数据。城市在 map 上用红色实心圆圈标记。

我能够实现其中的大部分。我面临的唯一挑战是城市点(红色圆圈)出现在 map 后面。我可以在 Firefox 中的检查元素中看到它们，但它们不可见因为它们印在 map 后面。

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

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");

感谢任何帮助，谢谢

Answer 1

看起来圆形的 dom 元素位于路径元素后面。您只需要更改将元素附加到文档的顺序。首先附加绘制 map 的路径，然后附加点。

 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");