Google地图上的剪裁Voronoi图缩放不正确

Question

现在我正在努力将这个Voronoi图正确地覆盖在Google Map上。我能够正确地绘制质心和线条，但我试图根据给定的半径剪切截面的边缘，这个半径不会根据缩放级别改变大小（即它覆盖相同的区域，无论如何缩放级别）。第一个链接具有边缘剪切，第二个链接具有在Google地图上工作的常规Voronoi（具有缩放），但是用于剪切Voronoi图的圆圈在缩放期间不能正确移动。

以下是基于http://bl.ocks.org/njvack/1405439和http://bl.ocks.org/shimizu/5610671的代码：

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

// load the data

d3.csv("201402_station_data.csv", function(data) {

  function sanFran(d) { if (d.landmark == "San Francisco") {return d;}}
  data = data.filter(sanFran)

  var overlay = new google.maps.OverlayView();

  overlay.onAdd = function() {

    var layer = d3.select(this.getPanes().overlayLayer).append("div")
      .attr("class", "svgOverlay");
    var svg = layer.append("svg")
    var svg_overlay = svg.append("g").attr("class","voronoi")

    var paths, points, clips;
    clips = svg_overlay.append("svg:g").attr("id", "point-clips");
    points = svg_overlay.append("svg:g").attr("id", "points");
    paths = svg_overlay.append("svg:g").attr("id", "point-paths");

    overlay.draw = function() {

      var projection = this.getProjection()

      // try to get just the coordinates to use for voronoi
      var positions = []
      data.forEach(function(d) {   
        var googleCoordinates = new google.maps.LatLng(d.lat, d.long);
        var pixelCoordinates = projection.fromLatLngToDivPixel(googleCoordinates)
        positions.push([pixelCoordinates.x+4000, pixelCoordinates.y+4000])
      });

      var polygons = d3.geom.voronoi(positions)

      clips.selectAll("clipPath")
          .data(data)
          .attr('cx', function(d,i) { return positions[i][0]; })
          .attr('cy', function(d,i) { return positions[i][1]; })
          .attr('r', 30)
        .enter().append("svg:clipPath")
          .attr("id", function(d, i) { return "clip-"+i;})
        .append("svg:circle")
          .attr('cx', function(d,i) { return positions[i][0]; })
          .attr('cy', function(d,i) { return positions[i][1]; })
          .attr('r', 30);

      var pathAttr = {
        "d": function(d, i) {return "M" + polygons[i].join("L") + "Z"},
        "clip-path": function(d,i) { return "url(#clip-"+i+")"},
        "id": function(d,i) { return "path-"+i},
        fill: "red", //d3.rgb(130, 230, 230),
        'fill-opacity': 0.4,
        "stroke": d3.rgb(200,200,200)
      }

      paths.selectAll("path")
          .data(data)
          .attr(pathAttr)
        .enter().append("svg:path")
          .attr(pathAttr)

      var circleAttr = {
        "cx": function(d, i) { return positions[i][0]; },
        "cy": function(d, i) { return positions[i][1]; },
        "r": 2,
        stroke: "none"
      }

      points.selectAll("circle")
          .data(data)
          .attr(circleAttr)
        .enter().append("svg:circle")
          .attr(circleAttr)
    }
  };
  overlay.setMap(map)
});

如果这与旧问题太接近，请道歉，我感谢任何帮助。