title: d3 circles on a leaflet map
body: <p>I am using the following code to generate a map with circles; </p>
  
  <p><a href="http://jsbin.com/OTaKEDor/2/edit" rel="nofollow noreferrer">http://jsbin.com/OTaKEDor/2/edit</a></p>
  
  <pre><code>&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"&gt;&lt;/script&gt;
  
  &lt;script type='text/javascript' id='lt_ws' src='http://localhost:52656/socket.io/lighttable/ws.js'&gt;&lt;/script&gt;
  
  &lt;div id="map" style="width: 100%; height: 100%; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      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");
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I map the coordinates to leaflet such that it is placed on the right spot. The problem is that the circles are placed on the svg on the leaflet map, google devtools confirms this, but they dont get the right attributes, they remain invisible.  </p>
  
  <p>See screenshot; </p>
  
  <p><img src="https://i.stack.imgur.com/CthsB.png" alt="enter image description here"> </p>
  
  <p>Is there something that I have forgotten to do? </p>