листовка Карта не обновляет новые значения - PullRequest
0 голосов
/ 06 ноября 2018

Я построил визуализацию карты на основе Leaflet с кружками, сделанными в 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();  
          }
...