2

我正在使用 D3.js 和 Google Map 创建动画地图。我在 Google Map顶部的叠加层中使用 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 个以“h_”开头的变量 + 时间（例如 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 滑块更改时也不再改变其半径。

在此先感谢您的帮助。

4

0 回答 0