D3 + leafley图层显示问题

Question

js和leaflet.js创建一个等时线图，但是当我试图绘制它没有显示的圆圈时，我使用了这段代码：

<p id="map">

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<script type="text/javascript" src="https://rawgit.com/jasondavies/conrec.js/master/conrec.js"></script>
  <script src="https://rawgit.com/d3/d3-plugins/master/geom/contour/contour.js"></script>
  <script src="node_modules/turf/turf.js" ></script>
<script>

var map = new L.Map("map", {center: [25.761680, -80.19179], zoom: 4})
    .addLayer(new L.tileLayer('http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png'));

map._initPathRoot();

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    is =svg.append("g").attr("class", "isochrome").attr("opacity",0.2).attr("width",960+"px").attr("height",500+"px");
    g = svg.append("g").attr("class", "roads");
    p = svg.append("g").attr("class", "roads");





d3.json("aaa.json", function(error, collection) {
  if (error) throw error;

     var geojsonMarkerOptions = {
    radius: 10,
    fillColor: "#FFF803",
    color: "#DDFF03",
    weight: 1,
    opacity: 1,
    fillOpacity:1
    };

    collection.forEach(function(d) {
       d.LatLng = new L.LatLng(d[0],d[1])
      })


    aux = collection;
  feature = is.selectAll("circle")
   .data(collection)
   .enter().append("circle")
   .style("stroke", "black")  
   .style("opacity", 1) 
   .style("fill", "red")
   .attr("r", 20);  

      map.on("viewreset", update);
    update();

    function update() {
     feature.attr("transform", 
     function(d) { 
         return "translate("+ 
      map.latLngToLayerPoint(d.LatLng).x +","+ 
      map.latLngToLayerPoint(d.LatLng).y +")";
         }
     )
    }

});

当您放大时，圆圈会显示，但它只显示一个小方块，而不是圆圈，这里有几个图像：

我正在进行一些测试并且它没有显示，因为svg图层没有大小，但是当调整大小时，这些点没有出现在正确的位置但是我正在使用map.latLngToLayerPoint(d.LatLng)任何想法是什么位置的问题。