Question

我正在尝试绘制一张包含23,000个城市及其对应的经度和纬度的世界地图。每个城市都用一个圆圈标记，圆圈大小与人口成正比，并根据我用于数据的csv的quartile列（上一列）进行着色。这是我的代码现在的样子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>

      body {
        background: white;
      }

      circle {
        fill: rgba(255, 165, 0, 0.2);
      }

    </style>
  </head>
  <body>
    <script>

      var outerWidth  = 500;
      var outerHeight = 250;
      var margin = { left: -50, top: 0, right: -50, bottom: 0 };
      var colorColumn = "quartile";
      var xColumn = "longitude";
      var yColumn = "latitude";
      var rColumn = "population";
      var peoplePerPixel = 100000;

      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

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

      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
      var rScale = d3.scale.sqrt();

      function render(data){

        xScale.domain( d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain( d3.extent(data, function (d){ return d[yColumn]; }));
        rScale.domain([0, d3.max(data, function (d){ return d[rColumn]; })]);

        // Compute the size of the biggest circle as a function of peoplePerPixel.
        var peopleMax = rScale.domain()[1];
        var rMin = 0;
        var rMax = Math.sqrt(peopleMax / (peoplePerPixel * Math.PI));
        rScale.range([rMin, rMax]);

        var circles = g.selectAll("circle").data(data);
        circles.enter().append("circle");
        circles
          .attr("cx", function (d){ return xScale(d[xColumn]); })
          .attr("cy", function (d){ return yScale(d[yColumn]); })
          .attr("r",  function (d){ return rScale(d[rColumn]); });
          .attr("fill",  function (d){ return colorScale(d[colorColumn]); });
        circles.exit().remove();
      }

      function type(d){
        d.latitude   = +d.latitude;
        d.longitude  = +d.longitude;
        d.population = +d.population;
        d. quartile = +d.quartile;
        return d;
      }

      d3.csv("https://gist.githubusercontent.com/glosophy/17c622561b873805646f1925e07722ba/raw/85949e73fdc7d999a1f54bc20a4f8da767fcde09/world-cities.csv", type, render);

    </script>
  </body>
</html>

以某种方式未显示地图。为什么会这样？

数据未显示在D3.js中的地图中

0 个答案: