D3点击事件不适用于谷歌地图

Question

我无法通过Google地图识别点击次数。其他一切正常，圆圈正确显示。但是当我点击一个圆圈时，光标不会从手上改变，如果我点击它，则不会调用console.log。

有什么建议吗？

<meta charset="utf-8" />
<meta content="initial-scale=1.0, user-scalable=no" name="viewport" /><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>    <script src="/mydrupal/sites/default/d3_files/d3.v3.js"></script>
<style type="text/css">svg {
border:0px solid #ebebeb;
}
.members, .members svg {
 position: absolute;
}
.members svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.members circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
#map {
width: 960px;
height: 700px;
margin: 0;
padding: 0;
}
</style>
<div id="map">&nbsp;</div>
<script type="text/javascript">
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
   title: p_title,
   width:400,
   height:400,
   resizable: false,
   modal : true,
   overlay: { 
     backgroundColor: "#000", opacity: 0.5 
     },
   close: function(ev, ui) {
     $(this).remove(); 
     }
 });
}
var cx; var cy;
var width  = 1000;
var height = 800;

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map") .node(), {
zoom: 11, 
center: new google.maps.LatLng(43.7, -79.4),
mapTypeId: google.maps.MapTypeId.TERRAIN // was ROADMAP
}
); // end new map
var circles;

var imageAttributes = {height:32, width:32, x:-16, y:-16};

d3.json("http://localhost:8888/mydrupal/member-json?nocache=" + (new Date()).getTime(),function(error,members){
 var bottom=members.organizations.map(function(members) {
    return members.member;
  });

var overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
var layer = d3.select(this.getPanes() .overlayMouseTarget)
    .append("div")
    .attr("class", "members")
    ; // end var layer

// 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(),
      padding = 10; // end var projection

  var marker = layer.selectAll("svg")
      .data(bottom)
      .each(transform) // update existing markers
    .enter()
      .append("svg:svg")
      .each(transform)
      .attr("class", "marker")
  ; // end var marker

 // Add a label.
  marker.append("svg:text")
      .attr("x", padding + 7)
      .attr("y", padding)
      .attr("dy", ".31em")
     .on("click", function(bottom) {
        console.log("click"); //not happening
        var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
        prettyAlert(message, bottom.title);
        })
      .on("touchstart", function(bottom) {
        console.log("click"); //not happening
         var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
    prettyAlert(message, bottom.title);
       })
      .text(function(bottom) { 
            return bottom.title; 
           })
; // end text marker append
  // Add a circle.
  marker.append("svg:circle")
      .attr("r", 4.5)
      .attr("cx", padding)
      .attr("cy", padding)
      .on("click", function(bottom) {
        console.log("click"); //not happening
        var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
        prettyAlert(message, bottom.title);
        })
      .on("touchstart", function(bottom) {
        console.log("click"); //not happening
         var message="<div><span style ='float: left; margin:0 7px 50px 0; height:50px;'><img src="+bottom.image+" style='width:50px; height:50px;' /></span>"+ bottom.body + "<br /><a href='http://" + bottom.field_url + "' target=_blank><u>" + bottom.field_url + "</u></a></div>";
    prettyAlert(message, bottom.title);
       })
  ; // end marker append circle

  function transform(bottom) {
    bottom = new google.maps.LatLng(bottom.field_lat, bottom.field_lng);
    bottom = projection.fromLatLngToDivPixel(bottom);
    return d3.select(this)
        .style("left", (bottom.x - padding) + "px")
        .style("top", (bottom.y - padding) + "px");
   } // end transform 
 }; // end overlay draw
}; // end overlay add function

// Bind our overlay to the map…
overlay.setMap(map); 
}); //  end members json
</script>