如何使d3 SVG点在缩放时保持在传单地图上的正确位置？

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

// 创建缩放函数
var zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

// 应用缩放函数于SVG容器
svg.call(zoom);

// 创建g元素
var g = svg.append("g");

// 创建投影函数
var projection = d3.geoMercator()
  .scale(100)
  .translate([width / 2, height / 2]);

// 创建点元素
var points = g.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("fill", "red");

// 更新点元素的位置
function updatePoints() {
  points.attr("cx", function(d) {
    return projection([d.lon, d.lat])[0];
  })
  .attr("cy", function(d) {
    return projection([d.lon, d.lat])[1];
  });
}

// 缩放函数的回调
function zoomed() {
  g.attr("transform", d3.event.transform);
  updatePoints();
}