d3 круги на листе карты

Question

Я использую следующий код для создания карты с кругами;

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 подтверждает это, но они не получают правильные атрибуты, они остаются невидимыми.

Смотреть скриншот;

Есть ли что-то, что я забыл сделать?

Answer 1

это сработало, это также лучший код, теперь данные привязываются к элементам 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") 
}