我使用以下代码生成带圆圈的地图;
http://jsbin.com/OTaKEDor/2/edit
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type='text/javascript' id='lt_ws' src='http://localhost:52656/socket.io/lighttable/ws.js'></script>
<div id="map" style="width: 100%; height: 100%; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0">
</div>
<script>
var map = L.map('map').setView([51.82, 5.861], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: ''
}).addTo(map);
var data = [ [5.861797,51.822823],[5.861843,51.822815],[5.5102863,51.78242],[5.8564305,51.821033],[5.859349,51.822502] ];
var plotData = data.map( function( coord ){
return map.latLngToLayerPoint( [ coord[1], coord[0] ] );
});
var svg = d3.select( map.getPanes().overlayPane ).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
g.selectAll("circle").data( plotData ).enter().append("circle")
.attr("cx", function(d){ return d.x; } )
.attr("cy", function(d){ return d.y; } )
.attr("r", 25)
.style("fill", "black");
</script>
我将坐标映射到传单,使其放置在正确的位置。问题是圆圈被放置在传单地图上的svg上,google devtools证实了这一点,但他们没有得到正确的属性,它们仍然是隐形的。
查看截图;
有什么我忘了做的事吗?
答案 0 :(得分:2)
这很有效,这也是更好的代码,现在数据绑定到svg元素,这允许更多的交互性;
function drawCircles(){
var data = [
{ "coords" : [ 37.8 , - 96.8 ], "time" : 1 },
{ "coords" : [ 33.6 , - 96.6 ], "time" : 5 },
{ "coords" : [ 40.5 , - 96.3 ], "time" : 4 },
{ "coords" : [ 37.4 , - 66.6 ], "time" : 3 },
{ "coords" : [ 37.8 , - 97.6 ], "time" : 2 }
].map( function(d){ var newPoint = map.latLngToLayerPoint( d.coords ); d.coords = { 'x' : newPoint.x, 'y' : newPoint.y }; return d; } )
g.selectAll("circle").data( data ).enter().append("circle")
.attr("cx", function(d){ console.log(d); return d.coords.x } )
.attr("cy", function(d){ return d.coords.y } )
.attr("r", 5 )
.style("fill", "teal")
}