Google maps D3.js&；谷歌地图：设置圆半径动画，缩放后除外

我正在使用D3.js和googlemap创建一个动画地图。我用d3.js（如教程中所述）在谷歌地图顶部的覆盖层中创建了圆圈。在这里之前一切都很好。以下是创建地图和圆圈的代码（代码非常混乱，但我是d3.js新手）：

这很好，圆圈是基于ui.value设置动画的

但是当我在地图上缩放并更改滑块值时，不会再发生任何事情。滑块仍然可用，但我的圆不再为其半径设置动画。控制台中没有错误

基本上，如果更改默认的缩放，我的更新功能将不再工作

我真的不明白为什么，在谷歌地图上缩放后，即使我回到默认的缩放级别，圆圈也不再在ui滑块上改变半径

提前感谢你的帮助

 var layer;
 var overlay;
 var map;
 var datas =[];
 var marker = [];
 var circle = [];
 var good = '#7b579e';
 var bad = '#27123c';
 var opacity = 0.5;
 var projection;



 map = new google.maps.Map(d3.select("#map-canvas").node(), {
  center: new google.maps.LatLng(48.85885,2.34705),
  zoom: 12,
  zoomControl: true,
  styles: mapStyle
 });


d3.json("velib.geojson", function(data) {

 overlay = new google.maps.OverlayView();

 // console.log(data);

 overlay.onAdd = function() {
  layer = d3.select(this.getPanes().overlayMouseTarget)
  .append("div")
  .attr("class", "velib")
  .style("z-index", 2000);

  // Draw each marker as a separate SVG element.
  // We could use a single SVG, but what size would it have?
  overlay.draw = function() {

    var projection = this.getProjection();    

    marker = layer.selectAll("svg")
                .data(d3.entries(data.features).filter(function(d) { return d.value.properties.Contract_n == 'Paris'}))
                .each(transform)
                .enter()
                .append("svg:svg")
                .each(transform)
                .attr("class", "marker")
                .attr("data-ville", function(d){ var ville = d.value.properties.Contract_n; return ville;});
                // .attr("id", function(d){var id =d.value.properties.Number; return id;});


  //console.log(marker);
  // Add a circle.
  circle =  marker.append("svg:circle")
      .attr("r", function(d){ 
        var bikes = d.value.properties.h_0; 
        if(bikes < 2 ){
          var availableBike = 2;
        } else {
          var availableBike = bikes / 3.2 ;
        }
        return availableBike;
      })
      .attr("cx", function(d){ 
        var bikes = d.value.properties.h_0; 
         if(bikes < 1 ){ 
            var cx = 4;  
          }else {
            var cx = bikes;
          }

        return cx;
      })
      .attr("cy", function(d){
        var bikes = d.value.properties.h_0; 
         if(bikes < 1 ){ 
           var cy = 4;
         }else {
            var cy = bikes;  
         }

        return cy;
      })
      .attr("fill", WhatColor)
      .attr("class", 'station')
      .attr('data_ville', function(d){ var ville = d.value.properties.Contract_n; return ville;})
      .attr('id', function(d){var id =d.value.properties.Number; return id;})
      .on('mouseover', function(d){
        console.log(d.value.properties.Number);
      });


    function transform(d) {

    padding = d.value.properties.h_0;
    d = new google.maps.LatLng(d.value.geometry.coordinates[1], d.value.geometry.coordinates[0]);
    d = projection.fromLatLngToDivPixel(d);

      return d3.select(this)
      .style("left", (d.x - padding) + "px")
      .style("top", (d.y - padding) + "px");
    }     
  };
 };

overlay.setMap(map);

});

  function WhatColor(d){
   var available = d.value.properties.h_0; 
   var stands = d.value.properties.Bike_stand;
   var half = stands / 2;
   var Color = available > half ?  good : bad;

  return Color; 
};

function update(value){

marker.selectAll('circle')
      .transition()
      .duration(600)
      .attr("r", function(d, i){ 
        var query = "d.value.properties.h_"+value;
        query = eval(query);
        var bikes = query / 3.2;       
        return bikes;
      })
      .attr("fill", WhatColor);
};

$( "#slider" ).slider({
  min: 1,
  max: 23,
  range: "min",
  slide: function( event, ui ) {
    console.log(ui.value);
    update(ui.value);
  }
});