d3.js 地图标注地点

// 创建 SVG 容器
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// 加载地理数据
d3.json("path/to/geojson.json").then(function(geojson) {
    // 创建地理投影
    var projection = d3.geoMercator()
        .scale(150)
        .translate([width / 2, height / 1.5]);

    // 创建地理路径生成器
    var path = d3.geoPath().projection(projection);

    // 绘制地图
    svg.selectAll("path")
        .data(geojson.features)
        .enter().append("path")
        .attr("d", path)
        .style("fill", "lightgray")
        .style("stroke", "white");

    // 添加标注点
    svg.selectAll("circle")
        .data(locations) // locations 是包含标注点信息的数组
        .enter().append("circle")
        .attr("cx", function(d) { return projection([d.longitude, d.latitude])[0]; })
        .attr("cy", function(d) { return projection([d.longitude, d.latitude])[1]; })
        .attr("r", 5)
        .style("fill", "red");
});