Question

我正在努力在传单地图上定位和缩放voronoi图。 voronoi多边形在附加到地图上后会正确显示，但是调整大小后，它们无法正确缩放和翻译。我试图重置之后的路径平移和缩放到要素元素。但看起来新值会传递给父元素。如果我在feature.selectAll（'path）.attr（'d'，path）上设置路径，则缩放和平移是绝对正确的，但它显示的是voronoi意味着voronoi多边形。有什么想法吗？

致以最诚挚的问候，

弗洛

  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];
  }

小册子地图上Voronoi的错误定位

0 个答案: