Question

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

我能够实现其中的大部分。只有挑战我面临的是城市点（红色圆圈）正在地图后面。我可以在firefox中的inspect元素中看到它们但是它们不可见因为它们印在地图后面。

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

alias

感谢任何帮助，Thanx

Answer 1

似乎圆圈的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");

城市点在d3的世界城市地图中落后于世界地图

1 个答案: