javascript - 如何将鸟类计数数据放入 d3.js 以在谷歌地图上绘制条形图-6ren

javascript - 如何将鸟类计数数据放入 d3.js 以在谷歌地图上绘制条形图

转载作者：行者123 更新时间：2023-11-30 00:24:44

我是 d3.js 的新手，我引用了这个例子:http://bl.ocks.org/emeeks/4531633 .

我把例子的 map 改成了谷歌地图，想用SVG画条谷歌地图上的图表。

<!DOCTYPE html>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
.gmap{ display: block; width: 1000px; height: 800px; }
.stations, .stations svg { position: absolute; }

.stations svg { width: 120px; height: 30px; padding-right: 100px; font: 12px sans-serif; }

.stations circle { fill: yellow; stroke: black; stroke-width: 1.5px; }
</style>
<body>
<div class="gmap" id="map-canvas"></div>  
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script></script>

<script>
var map;

function initialize() {
  var mapOptions = { zoom: 8, center: new                  
   google.maps.LatLng(23.7147979,120.7105502) };
   map = new google.maps.Map( document.getElementById('map-canvas') , mapOptions);
}

initialize();

var width = 960, height = 960;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);


d3.csv("223-loc.csv", function(data) {
    var parse = d3.time.format("%Y/%m/%d").parse; 

    aaa = d3.nest()
            .key(function(d){ return d.birdName;})
            .entries(stocks = data);        
    aaa_copy = d3.nest()
             .key(function(d){ return d.birdName;})
             .entries(stocks = data);
    var position2keep= new Array(); 
    var i=0;
    aaa.forEach(function(s) 
    {
        for (nn=0; nn<selectAryy.length; nn++)
        {
            if (s.key == selectAryy[nn])
            {   position2keep.push(i); break; } 
        }
    i++;
    });

    position2keep.sort(); 
    for (j=aaa_copy.length-1; j>=0; j--) 
{ 
    if ( position2keep.indexOf(j) == -1) 
        aaa_copy.splice(j,1); 
}

aaa_copy.forEach(function(s) {
    s.values.forEach(function(d) { 
        for (nn=0; nn<selectAryy.length; nn++){
            if (d.birdName== selectAryy[nn]){   
                d.date = parse(d.date);
                d.count = +d.count;
                d.lat = +d.lat;
                d.lng = +d.lng; 
            } 
        }

   bars = svg.selectAll("g")
  .data(s)
  .enter()
  .append("g")
  .attr("class", "bars")
  .attr("transform", function(d) {return "translate("+ d.lat +","+   
   d.lng+")";});

    bars.append("rect")               
      .attr('height',  function(d) {return d.count*1000})
      .attr('width', 10)
      .attr('y', function(d) {return -(d.count)})
      .attr("class", "bars")
      .style("fill", "green");

   bars.append("text")
  .text(function(d) {return d.location})
  .attr("x", -10)
  .attr("y", 18);

    bars.setMap(map);   
    }); 
   });  
 });
</script>
</body>

我的 CSV 数据:https://drive.google.com/open?id=0B6SUWnrBmDwSWkI4bVNtOTNSOTA

我使用 d3.csv 加载数据，它有效。但是当我想将数据放入SVG中绘制条形图时，它不起作用。

谁能帮我解决这个问题？

最佳答案

在提供的示例中存在一些问题:

selectAryy 未定义
最重要的是 bars.setMap(map); 似乎无效。您是指 google.maps.OverlayView 对象的 setMap 函数吗？

为了在 Google map 上创建条形图，我建议将其实现为 Custom Overlay .

话虽如此，下面的示例演示了如何使用 overlay 技术将 svg 对象(条形图)添加到 Google map 中:

示例

function BarChartOverlay(chartData, map){
    this.map_ = map;
    this.chartData_ = chartData;
    this.div_=null;
    this.setMap(map);
}

BarChartOverlay.prototype = new google.maps.OverlayView();

BarChartOverlay.prototype.onAdd = function(){
    var overlayProjection = this.getProjection();
    var div = document.createElement('div');
    div.setAttribute('id','chartDiv');

    var chartArea = d3.select(div).append("svg");
                 
    this.chartData_.forEach(function(item){

       var pos = overlayProjection.fromLatLngToDivPixel(new google.maps.LatLng(item[0], item[1]));

       var bar = chartArea
                  .append("rect")
                  .attr("x", pos.x)
                  .attr("y", pos.y)
                  .attr("width", 40)
                  .attr("height", item[2])
                  .attr("fill-opacity", '0.5')
                  .attr("fill", 'purple');
    });
    
     
    this.div_ = div;
    this.chartArea_ = chartArea;
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);    
    
};

BarChartOverlay.prototype.draw = function(){
    var overlayProjection = this.getProjection();
    var sw = overlayProjection.fromLatLngToDivPixel(this.map_.getBounds().getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.map_.getBounds().getNorthEast());
    var chartAreaSize = sw.x + ' ' +  ne.y + ' ' + (ne.x - sw.x) + ' ' + (sw.y - ne.y);
    this.chartArea_.attr('viewBox',chartAreaSize);
};

BarChartOverlay.prototype.onRemove = function(){
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
};



function initialize() {
            var mapOptions = {
                zoom: 8, center: new
                 google.maps.LatLng(23.7147979, 120.7105502)
            };
            var chartData = [
              [25.204757,121.6896172,100],
              [22.7972447,121.0713702,130],
              [24.254972,120.6011066,80]
            ];
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var overlay = new BarChartOverlay(chartData, map);
}
initialize();

.gmap {
   display: block;
   width: 1000px;
   height: 800px;
}

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div class="gmap" id="map-canvas"></div>

关于javascript - 如何将鸟类计数数据放入 d3.js 以在谷歌地图上绘制条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31847036/

文章推荐： javascript - 重定向到其他页面时 IE10 中的 Cookie 丢失

文章推荐： javascript - 子进程何时终止

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将鸟类计数数据放入 d3.js 以在谷歌地图上绘制条形图