D3 not show Circles

Question

Hi all I'm using leflet with d3 to make an isochronus map but when i try to prit the markers as circles it puts at the correct position but doesn't show anything

<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 +")";
         }
     )
    }

});

here is an image image of circle not showing up

Answer 1

我尝试在没有Google扩展程序的情况下执行您的代码。我猜你的cy变量超出了svg的范围。在html中尝试更改圆圈的“cy”值并查看圆圈是否显示。我创建了一个小plnkr来向您展示this link的演示外观。您将需要修复cy的计算或添加转换变换属性，就像我一样。

  cont_group.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return d.x
    })
    .attr("cy", function(d) {
      return d.y // your cy value is going out of range
    })
    .attr("r", "8px")
    .attr("fill", "red")
    .attr("transform", "translate(30,155)");