javascript - リーフレット マップ上のボロノイの位置が正しくない

Question

リーフレット マップ上のボロノイ図の配置とスケーリングに苦労しています。ボロノイ ポリゴンは、マップに追加された後は正しく表示されますが、サイズ変更後は正しくスケーリングおよび変換されません。機能要素にパンおよびズームした後、パスをリセットしようとしました。しかし、新しい値が親の要素に渡されているようです。feature.selectAll('path).attr('d',path) にパスを設定すると、スケーリングと変換は完全に正しいですが、代わりにボロノイ ポリゴンを意味するボロノイが表示されます。何か案が？

よろしくお願いします、

フロー

  this.id = p_id;
  this.data = p_data;
  d3.select('#'+this.id).remove();
  var svg = d3.select(map.getPanes().overlayPane).append("svg").attr('id', this.id);

  var g = svg.append("g").attr("class", "leaflet-zoom-hide").attr("id", "cells");
  var pointdata = this.data.features;
  var positions = [];

  pointdata.forEach(function(d){
    positions.push(project(d.geometry.coordinates));
  });

  var polygons = d3.geom.voronoi(positions);
  var bounds = d3.geo.bounds(this.data),
      path = d3.geo.path().projection(project);
  var feature = g.selectAll('g').data(pointdata).enter().append('g');

  feature.append('path')
      .attr('class', 'cell')
      .attr({
          "d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
          stroke:"#43676b",
          fill: "rgba(255,140,10,0.3)"
      });

  map.on("viewreset", reset);
  reset();
  function reset() {
    scale = Math.pow(2, map.getZoom() - map.options.zoom);
    var padding = 25;
    var bottomLeft = project(bounds[0]),
        topRight = project(bounds[1]);

    bottomLeft = [bottomLeft[0]-padding, bottomLeft[1]+padding]
    topRight = [topRight[0]+padding, topRight[1]-padding]

    console.log(polygons); 

    svg.attr("width", topRight[0] - bottomLeft[0]).attr("height", bottomLeft[1] - topRight[1]).style("margin-left", bottomLeft[0] + "px").style("margin-top", topRight[1] + "px");
    g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
    feature.attr('d', path);
  }

  function project(x) {
      var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
      return [point.x, point.y];
  }