Question

我正在使用D3.js＆amp;谷歌地图创建一个动画地图。我在谷歌地图顶部的叠加层内创建了d3.js的圆圈（在教程中称为Google Map + D3）。一切正常，直到这里。这是创建地图和圆圈的代码（代码非常混乱，但我是d3.js新手）：

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

然后，我为圆圈设置动画以显示24小时内发生的事情。在我的json文件中，每个点/圆都有24个以＆＃34; h _＆＃34;开头的变量。 +时间（例如h_0，h_1，h_2，h_3 ......）要通过这些变量并更新我的圆的半径，我使用了一个ui滑块。这是更新功能和滑块功能：

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

这很有效，圆圈基于ui.value进行动画制作。

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

基本上，如果更改默认缩放，我的更新功能就不再有用了。

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

提前感谢您的帮助。

D3.js＆amp; Google地图：除缩放后的动画圆半径

0 个答案: