D3 不显示圈子答案

【问题标题】：D3 not show CirclesD3 不显示圈子
【发布时间】：2015-11-12 12:05:33
【问题描述】：

大家好，我正在使用带有 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 +")";
         }
     )
    }

});

这是一张图片 image of circle not showing up

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

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

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

【讨论】：