我正在使用D3制作地图，并在地图上绘制英国人口普查数据，供用户进行分析。
地图目前正在使用谷歌D3代码和我在网上重复使用的其他代码，正在显示人口普查数据。
现在我尝试在地图上实现区域的选择。理想情况下，当用户点击地图区域时，我会想要绘制一个正方形或圆形，并且方形或圆形内的所有点都将用于某些分析。
我不知道如何在D3中做到这一点，任何人都可以帮忙吗？
我目前的代码如下：
块引用
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--This meta tag ensures that the right website is selected for the right device-->
<meta name= "viewport" content= "width=device-width, initial-scale=1.0">
<link rel= "stylesheet" type="text/css" href= "css/bootstrap.min.css">
<link rel= "stylesheet" type="text/css" href= "css/custom-style.css" >
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<div class= "container">
<div class= "row text-center">
<p></p>
<a href= "#" class= "navbar-brand-center"><img src="images/logo_img_2.png" alt="center"></img></a>
<p></p>
</div>
</div>
<!--Navigation Bar Code-->
<div class= "navbar-custom">
<div class= "container">
<!--This button only appears in the mobile version of the website-->
<button class= "navbar-toggle" data-toggle= "collapse" data-target= ".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li class= "active"> <a href= "#">Home</a></li>
<li> <a href= "#">Getting Started</a></li>
<li class= "dropdown">
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown">Documentation <b class= "caret"></b></a>
<ul class= "dropdown-menu">
<li> <a href= "#">User Manual</a></li>
<li> <a href= "#">Implementation UML Diagrams</a></li>
<li> <a href= "#">Academic Papers</a></li>
<li> <a href= "#">Other Useful Documents</a></li>
</ul>
</li>
<li> <a href= "#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!--Header Panel Bar Code-->
<div class= "container">
<div class= "jumbotron-center">
<div class= "box">
<div class="bg"><img src="images/banner_2.jpg" class="img-rounded"></div>
<div class="col-lg-4">
<h2>Attribute Signature Interactive Geographical Map</h2>
<p>About this Website: The Interactive Geographical Map is an interactive web tool which allow you to generate visual summaries of geographical data based on your interaction (selections) with the graphical map. This environment was developed by Michael Lashley. </p>
<a class= "btn btn-default btn-warning">Leave a comment...</a>
</div>
</div>
</div>
</div>
<!--Row Code-->
<div class= "container">
<div class= "row">
<!--Analysis Parameters Code-->
<div class= "col-md-3">
<h3>Analysis Parameter</h3>
<form role="form">
<p>Visual Design Alternatives</p>
<div class="radio">
<label><input type="radio" name="optradio">Single Sparkline</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Multiple Sparkline</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Bar Chart</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Multi-Bar Chart</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">None</label>
</div>
<p>Key-Frame Brushing</p>
<div class="radio">
<label><input type="radio" name="optradio">Frame Brush 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Frame Brush 2</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Frame Brush 3</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">None</label>
</div>
<button type="submit" class="btn btn-default">Set Parameters</button>
</form>
</div>
<!--Map Code-->
<div class= "col-md-9">
<div id= "map"></div>
</div>
</div>
</div>
<script type="text/javascript">
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 7,
center: new google.maps.LatLng(51.5000, 0.1167),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var data = [
{ oa: "E00000001", lng: -0.095154937, lat: 51.520236 },
{ oa: "E00000003", lng: -0.096352226, lat: 51.519869 },
{ oa: "E00000005", lng: -0.096674785, lat: 51.519047 },
{ oa: "E00000007", lng: -0.096970467, lat: 51.516795 },
{ oa: "E00000010", lng: -0.097464624, lat: 51.522576 },
{ oa: "E00000012", lng: -0.09591956 , lat: 51.521948 },
{ oa: "E00000013", lng: -0.096452804, lat: 51.520914 },
{ oa: "E00000014", lng: -0.096907519, lat: 51.522108 },
{ oa: "E00000016", lng: -0.093145103, lat: 51.521076 },
{ oa:"E00000017", lng: -0.091830999, lat: 51.520443 },
];
// Load the station data. When the data comes back, create an overlay.
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().overlayLayer).append("div")
.attr("height", "100%")
.attr("width", "100%")
.attr("class", "stations")
.attr("id", "layer");
layer[0][0].style.width = "1366px";
layer[0][0].parentNode.style.width = "100%";
layer[0][0].parentNode.style.height = "100%";
layer[0][0].parentNode.parentNode.style.width = "100%";
layer[0][0].parentNode.parentNode.style.height = "100%";
layer[0][0].parentNode.parentNode.parentNode.style.width = "100%";
layer[0][0].parentNode.parentNode.parentNode.style.height = "100%";
layer[0][0].parentNode.parentNode.parentNode.parentNode.style.width = "100%";
layer[0][0].parentNode.parentNode.parentNode.parentNode.style.height = "100%";
// 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;
var marker = layer.selectAll("svg")
.data( data )
.each(transform) // update existing markers
.enter().append("svg:svg")
.each(transform)
.attr("class", "marker aaa")
marker.append("svg:circle")
.attr("r", 7)
.attr("cx", padding )
.attr("cy", padding );
// add a label.
marker.append("svg:text")
.attr("x", padding + 7)
.attr("y", padding)
.attr("dy", ".31em")
.text( function(d) {
return d.oa; }
);
var v = d3.geom.voronoi( translate(data) );
console.log( "v is :" );
console.log( v );
var edges = layer.selectAll("path")
.data( v )
.enter().append("svg:svg").attr("width", "100%").attr("width","100%").style("position", "absolute")
.append("svg:path")
.attr( "d", function(d){
var e = transform_path(d)
var p = 'M' + e.join('L') + 'Z'
console.log( 'PATH: ' + p)
return p
}).attr("fill", "none").attr("stroke", "black")
;
function translate(data) {
var d = []
for( var i=0; i<data.length; i++){
var c = [ data[i].lat, data[i].lng ]
d.push( c )
}
return d
}
function _projection( lat, lng ) {
e = new google.maps.LatLng( lat, lng );
e = projection.fromLatLngToDivPixel(e);
return [ e.x - padding, e.y - padding]
// return [ e.x, e.y ]
}
function transform(d) {
e = _projection( d.lat, d.lng )
console.log("marker " + d.lat +', ' + d.lng + " -> left: " + e[0] +", top: " + e[1] )
return d3.select(this)
.style("left", e[0] + "px")
.style("top", e[1] + "px");
}
function transform_path(data) {
var d = []
console.log(data)
for( var i=0; i<data.length; i++) {
var c = _projection( data[i][0], data[i][1] )
console.log( ' path point: ' + JSON.stringify(data[i]) + ' -> left: ' + c[0] + ", top: " + c[1])
d.push( c )
}
// console.log(d)
return d
}
};
};
// Bind our overlay to the map…
overlay.setMap(map);
</script>
<!--Footer Bar Code-->
<div class= "navbar navbar-custom navbar-static-bottom">
<div class= "container">
<p class= "navbar-text pull-left">Copyright 2014 City University London. All rights reserved.</p>
<a class= "navbar-btn btn-success btn pull-right">Leave a comment...<a/>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src= "js/bootstrap.js"></script>
</body>
块引用