D3.js 缩放时，如何使d3 svg点保持在传单地图上的正确位置？ var-map=L.map（'mapid'）.setView（[10.0,15.0]，2）； L.tileLayer（'https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z} /{x}/{y}？访问令牌=pk.eyj1ijoic2fidw1hzm9viiwiysi6imnqmwe3cnqcta5dncyd216yji0bny4dgeifq.fgmxgmkvialdbd305{ 属性：“地图数据©；贡献者，图像©”， maxZoom:18， id:“地图盒。街道”， accessToken:'pk.eyJ1Ijoic2FidW1hZm9vIiwiYSI6ImNqMWE3cnlqcTA5dncyd216YjI0bnY4dGEifQ.fgmxgkvialdbd305_BA' }).addTo（地图）； L.svg（）.addTo（map）； var svg=d3.select（map.getPanes（）.overlypane）.select（'svg'）； var g=svg.append（'g'）.attr（'class'，'shaplezoomhide'）； 常量URL=https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&limit=200' 函数getEarthquakeData（）{ 获取（URL） 。然后（（结果）=>{ 返回results.json（）； }) 。然后（（结果）=>{ 功能投影点（x，y）{ var point=map.latLngToLayerPoint（新的L.LatLng（y，x））； 这个.stream.point（点x，点y）； } var transform=d3.geoTransform（{point:projectPoint}）， 路径=d3.geoPath（）.projection（transform）； 函数applylalngtolayer（d）{ 变量y=d.几何坐标[1]； var x=d.几何坐标[0]； 返回地图latLngToLayerPoint（新L.LatLng（y，x））； } //console.log（result.features）； //result.features.forEach（函数（d）{ //d.LatLng=新的L.LatLng（d.geometry.坐标[1]， //d.几何坐标[0]） // }); var circle=g.selectAll（‘circle’） .数据（结果.特征） .enter（）.append（'圆'） .style（'fill'，'darkred'） .attr（'r'，2） .attr（'opacity'，0.5）； 函数更新（）{ circle.attr（“转换”， 职能（d）{ 返回“translate（”+ applylalngtolayer（d）.x+“，”+ applylalngtolayer（d.y+）”； }); 变量边界=路径边界（结果）， 左上=边界[0]， bottomRight=边界[1]； svg.attr（“宽度”，右下[0]-左上[0]） .attr（“高度”，右下[1]-左上[1]） .style（“左”，左上[0]+“px”） .样式（“顶部”，左上方[1]+“px”）； g、 属性（“转换”、“转换”（“+-topLeft[0]+”，“+-topLeft[1]+”））； } 地图打开（“视图重置”，更新）； 更新（）； }) } 获取地震数据（）；

上面的代码将在传单地图获取我感兴趣的映射数据后为其添加点。问题是，当我放大地图时，所有的点都保持在相同的位置，而地图背景改变了视图。在除开放视图外的任何视图中，这些点实际上并没有“粘贴”到正确的位置。我知道这与我更新视图的方式有关，但我一直没有弄清楚。请帮忙！提前感谢。

我怀疑您正在使用版本1。*，如果是，则这是一个已知问题：

从

viewsete

事件切换到

moveend

事件，您应该可以了

var map = L.map('mapid').setView([10.0, 15.0], 2);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2FidW1hZm9vIiwiYSI6ImNqMWE3cnlqcTA5dncyd216YjI0bnY4dGEifQ.fgmXgmkvialdBd3D405_BA', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1Ijoic2FidW1hZm9vIiwiYSI6ImNqMWE3cnlqcTA5dncyd216YjI0bnY4dGEifQ.fgmXgmkvialdBd3D405_BA'
}).addTo(map);

L.svg().addTo(map);

var svg = d3.select(map.getPanes().overlayPane).select('svg');

var g = svg.append('g').attr('class', 'leaflet-zoom-hide');

const URL = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&limit=200'

function getEarthquakeData() {
  fetch(URL)
  .then((results) => {
return results.json();
  })
  .then((result) => {

function projectPoint(x,y) {
  var point = map.latLngToLayerPoint(new L.LatLng(y,x));
  this.stream.point(point.x, point.y);
}

var transform = d3.geoTransform({point: projectPoint}),
path = d3.geoPath().projection(transform);

function applyLatLngToLayer(d){
  var y = d.geometry.coordinates[1];
  var x = d.geometry.coordinates[0];
  return map.latLngToLayerPoint(new L.LatLng(y,x));
}

// console.log(result.features);
// result.features.forEach(function(d) {
//   d.LatLng = new L.LatLng(d.geometry.coordinates[1],
//     d.geometry.coordinates[0])
//   });

var circle = g.selectAll('circle')
.data(result.features)
.enter().append('circle')
.style('fill','darkred')
.attr('r', 2)
.attr('opacity',0.5);

function update() {

  circle.attr("transform",
  function(d) {
    return "translate("+
    applyLatLngToLayer(d).x+","+
    applyLatLngToLayer(d).y+")";
  });

  var bounds = path.bounds(result),
  topLeft = bounds[0],
  bottomRight = bounds[1];

  svg.attr("width", bottomRight[0] - topLeft[0])
    .attr("height", bottomRight[1] - topLeft[1])
    .style("left", topLeft[0] + "px")
    .style("top", topLeft[1] + "px");

  g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

  }

  map.on('viewreset', update);
  update();

  })

}


getEarthquakeData();