D3不顯示圈子

Question

大家好，我在d3上使用leflet制作等時線圖，但是當我嘗試將標記標記為圓形時，它將放置在正確的位置，但什么也沒顯示

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

});

這是沒有出現的圓圈的圖像

Answer 1

我試圖執行沒有Google擴展程序的代碼。 我猜你的cy變量超出了svg的范圍。 在html中，嘗試更改圓圈的“ cy”值，並查看圓圈是否出現。 我創建了一個小的plnkr，以演示該鏈接的演示。 您將需要修復cy的計算或像我一樣添加translate transform屬性。

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