Question

我是d3.js的新手，我参考了这个例子：http://bl.ocks.org/emeeks/4531633。

我将示例的地图更改为Google地图，并希望使用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绘制条形图时，它并没有起作用。

有人可以帮我解决吗？

Answer 1

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

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

为了在Google地图上创建条形图，我建议将其实施为Custom Overlay。

说过以下示例演示了如何使用 overlay 技术将svg个对象（条形图）添加到Google地图中：

示例

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

1 个答案: