传单地图不会根据新值更新

Question

我已经建立了基于传单的地图可视化，并在D3中制作了带有圆圈的地图。根据数据选择，地图会更新值。我在可视化中面临两个问题-

1. 某些圈子在地图上被剪掉
2. 仅当我放大和缩小地图时，地图才会更新正确的数据。在第一次加载时，它无法显示正确的结果。

源代码

function updateSubset() { 

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



              // creating points using paths 
              var points = g.selectAll("circle")
                          .data(result);

              var pointsEnter = points.enter().append("circle")
                                      .attr("class", "points");
              //console.log(points)

              points.merge(pointsEnter).attr("r", 10)
                    .style("fill-opacity", 0.4)
                    .style("fill", "red");


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


            function update() {

                    var bounds = path.bounds(geoData);

                    topLeft = [bounds[0][0] + 10 , bounds[0][1] - 10]
                    bottomRight = [bounds[1][0] + 10 , bounds[1][1] + 10];

                    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] + ")");

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


               points.exit().remove();  
          }