如何在D3.js生成的地图上按经纬度坐标添加标记点

问题原因 #

你的标记显示异常核心是两个问题：

1. 墨卡托投影的平移参数设置错误：你设置的translate([200, 850])中y轴偏移量为850，而SVG容器高度只有500px，绝大多数标记点投影后的y坐标都会超出SVG可视范围，仅少数坐标计算后落在左上角区域的点能被看到，视觉上就出现了所有标记都堆在左上角的问题。
2. 投影缩放参数和你要展示的区域不匹配：你的标记点大多集中在欧洲区域，当前的缩放参数也会导致点的位置偏离可视区。

修正方案 #

调整投影参数适配你的SVG尺寸和展示区域即可，参考修改后的完整代码如下：

HTML代码

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<svg id="my_dataviz" width="750" height="500"></svg>

JS代码

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// 调整投影参数适配欧洲区域展示
var projection = d3.geoMercator()
    .scale(600)
    // 平移值基于SVG宽高中心调整，适配欧洲区域的y轴偏移
    .translate([width / 2 - 100, height / 2 + 200])

var path = d3.geoPath()
    .projection(projection)

var markers = [
    {long: 22, lat: 42}, // Kumanovo
    {long: 21, lat: 41.500}, // Skopje
    {long: 20.400, lat: 44.500}, // Belgrade
    {long: 20, lat: 41.500}, // Elbasan
    {long: 21, lat: 42.300}, // Prizren
    {long: 24.250, lat: 43}, // Sofia
    {long: 11.400, lat: 44.300}, //Forli
    {long: 20, lat: 41}, //Tirana
    {long: 12, lat: 53}, // Berlin
    {long: 43, lat: 57}, // Moscow
    {long: 0, lat: 41}, // Barcelona
    {long: 16, lat: 48.300}, // Vienna
];

// 加载世界地图数据
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
    // 绘制底图
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter().append("path")
            .attr("fill", "#b8b8b8")
            .attr("d", path)
            .style("stroke", "#fff")
            .style("stroke-width", 1)

    // 绘制标记点
    svg.selectAll("myCircles")
    .data(markers)
    .enter()
    .append("circle")
    .attr("cx", function(d){ return projection([d.long, d.lat])[0] })
    .attr("cy", function(d){ return projection([d.long, d.lat])[1] })
    .attr("r", 3)
    .style("fill", "crimson")
})

如果后续需要调整展示区域，只需要修改scale的缩放值和translate的偏移值即可：缩放值越大地图放大比例越高，translate的两个参数分别对应x轴和y轴的整体偏移量。

内容的提问来源于stack exchange，提问作者user17071394