1

我正在尝试在 d3 画布中绘制签入信息。我正在使用这个流行的脚本来创建地图并绘制点。

我可以绘制大约 12000 点，之后脚本拒绝在画布上绘制任何内容。有人可以指出我可能做错了什么吗？

<script>
    var width = 960,
        height = 480;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var projection = d3.geo.equirectangular()
      .scale(153)
        .translate([width/2,height/2])


    var path = d3.geo.path()
        .projection(projection);

    var graticule = d3.geo.graticule();


    geo_data = [];
    d3.csv("data/2008.csv", function(x){
        console.log(x.length)
        for (i = 12000; i < 24000; i++) { 
          geo_data.push([x[i].lat, x[i].long])
        }        
    });

    d3.json("https://gist.githubusercontent.com/abenrob/787723ca91772591b47e/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, world) {
        svg.append("g")
          .attr("class", "land")
        .selectAll("path")
          .data([topojson.object(world, world.objects.land)])
          .enter().append("path")
          .attr("d", path);
      svg.append("g")
          .attr("class", "boundary")
        .selectAll("boundary")
          .data([topojson.object(world, world.objects.countries)])
          .enter().append("path")
          .attr("d", path);
      svg.append("g")
        .attr("class", "graticule")
        .selectAll("path")
        .data(graticule.lines)
        .enter().append("path")
        .attr("d", path);

      svg.selectAll("circle")
        .data(geo_data)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return projection(d)[0]; })
        .attr("cy", function (d) { return projection(d)[1]; })
        .attr("r", "2px")
        .attr("fill", "red")
    });

  </script>

12000点画布

csv 文件包含这种格式的信息

lat,long
 -104.934812, 39.711152
 -104.984703, 39.739154
 -105.09543, 39.802002
4

0 回答 0