Fatal编程技术网
  • javascript/
  • Javascript 如何在d3.js中输入鸟类计数数据，以便在谷歌地图上绘制条形图

Javascript 如何在d3.js中输入鸟类计数数据，以便在谷歌地图上绘制条形图

javascript google-maps d3.js svg

Javascript 如何在d3.js中输入鸟类计数数据，以便在谷歌地图上绘制条形图,javascript,google-maps,d3.js,svg,Javascript,Google Maps,D3.js,Svg,我是d3.js新手，我参考了以下示例： 我将示例的映射更改为GoogleMap，并希望使用SVG来绘制工具栏 谷歌地图上的图表 <!DOCTYPE html> <title>test</title> <meta charset="utf-8"> <style type="text/css"> .gmap{ display: block; width: 1000px; height: 800px; } .stations, .statio

我是d3.js新手，我参考了以下示例：

我将示例的映射更改为GoogleMap，并希望使用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>


测试
.gmap{显示：块；宽度：1000px；高度：800px；}
.stations、.stations svg{位置：绝对；}
.svg{宽度：120px；高度：30px；右侧填充：100px；字体：12px无衬线；}
.stations圆{填充：黄色；笔划：黑色；笔划宽度：1.5px；}
var映射；
函数初始化（）{
var mapOptions={缩放：8，中心：新建
google.maps.LatLng（23.7147979120.7105502）}；
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
}
初始化（）；
变量宽度=960，高度=960；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.csv（“223 loc.csv”，功能（数据）{
var parse=d3.time.format（“%Y/%m/%d”）.parse；
aaa=d3.nest（）
.key（函数（d）{返回d.birdName；}）
.分录（股票=数据）；
aaa_copy=d3.nest（）
.key（函数（d）{返回d.birdName；}）
.分录（股票=数据）；
var position2keep=新数组（）；
var i=0；
aaa.forEach（功能）
{
对于（nn=0；nn=0；j--）
{ 
if（位置2KEEP.indexOf（j）=-1）
aaa_拷贝拼接（j，1）；
}
aaa_副本forEach（功能）{
s、 forEach（函数（d）{

对于（nn=0；nn，在提供的示例中存在一些问题：


    

  • selectary
    未定义
    • 

  • 最重要的是
    bar.setMap（map）；
    似乎无效。你是说
    google.maps.OverlayView
    对象的
    setMap
    功能吗
    • 


为了在谷歌地图上创建条形图，我建议将其实现为

下面的示例演示了如何使用覆盖技术将
svg
对象（条形图）添加到Google地图中：

示例



功能BarChartOverlay（图表数据、地图）{
this.map=map；
this.chartData u=chartData；
this.div_979;=null；
这个.setMap（map）；
}
BarChartOverlay.prototype=新的google.maps.OverlayView（）；
BarChartOverlay.prototype.onAdd=函数（）{
var overlyprojection=this.getProjection（）；
var div=document.createElement（'div'）；
setAttribute（'id'，'chartDiv'）；
var chartArea=d3.select（div.append（“svg”）；
此.chartData_uuu.forEach（函数（项）{
var pos=OverlyProjection.fromLatLngToDivPixel（新的google.maps.LatLng（项目[0]，项目[1]）；
var bar=图表区域
.append（“rect”）
.attr（“x”，位置x）
.attr（“y”，位置y）
.attr（“宽度”，40）
.attr（“高度”，第[2]项）
.attr（“填充不透明度”，“0.5”）
.attr（“填充”、“紫色”）；
});
this.div=div；
this.chartArea u=chartArea；
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
BarChartOverlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var sw=overlayProjection.fromLatLngToDivPixel（this.map_u.getBounds（）.getSouthWest（））；
var ne=overlyprojection.fromLatLngToDivPixel（this.map_u.getBounds（）.getNorthEast（））；
var chartAreaSize=sw.x++'+ne.y++'+（ne.x-sw.x）+'+（sw.y-ne.y）；
此.chartArea_uU2;.attr（'viewBox'，chartAreaSize）；
};
BarChartOverlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
this.div=null；
};
函数初始化（）{
变量映射选项={
缩放：8，中心：新
google.maps.LatLng（23.7147979120.7105502）
};
var图表数据=[
[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=新的BarChartOverlay（图表数据、地图）；
}
初始化（）；


.gmap{
显示：块；
宽度：1000px；
高度：800px；
}




它是如何“不工作”的？谷歌地图可以正常显示，但条形图不能在地图上绘制。它只是没有出现？或者发生了其他事情？是否有javascript错误？是否存在于DOM中？您是否尝试在调试器中逐步检查javascript并找出发生了什么？console.log没有y错误。数据放在数组aaa和aaa_副本中，但SVG没有绘制它。Gremyachev谢谢。现在可以工作了。但另一个问题是条形图不能与地图一起定位放大或缩小。你能给我举个例子吗？或者你能再帮我一次吗？