使用 JS 和 geojson 文件创建纽约市行政区的 d3 地图答案

【问题标题】：Creating a d3 map of nyc boroughs using JS and a geojson file使用 JS 和 geojson 文件创建纽约市行政区的 d3 地图
【发布时间】：2016-03-14 01:39:12
【问题描述】：

几周以来，我一直在尝试使用代码创建 d3 地图网格化教程。这是我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <title></title>
   <script type="text/javascript"  src= "d3.min.js">
      Modernizr.load({
            test: Modernizr.svg && Modernizr.inlinesvg,
            yep : [ 'd3.min.js',
                    'js/script.js' ]
        });
   </script>
</head>

<body>
  <script src="NYC_MapInfo.geojson"></script>

  <script>

   var width = 960, 
       height = 1160;

  var projection = d3.geo.mercator()
      .scale(500)
      .translate([width / 2, height / 2]);

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


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

  d3.json("NYC_MapInfo.geojson", function(error, NYC_MapInfo) {
    svg.append("path")
        .datum(NYC_MapInfo.feature(NYC_MapInfo, NYC_MapInfo.objects))
  .attr("d", path);
});

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

这是json file的链接：

有人可以帮我修复加载图像的代码吗？

这里有一个链接可以帮助您查看代码：http://0.0.0.0:8000/nyc_zipmap.html

【问题讨论】：

标签： javascript html json d3.js svg

【解决方案1】：

您正在从 GeoJSON 文件加载您的几何图形，所以这就是您绘制这些多边形的方式：

svg.selectAll("path")
   .data(NYC_MapInfo.features)
   .enter()
     .append("path")
     .attr("d", path);

此代码的作用是为您的 geojson 文件中的“功能”下找到的每个单个元素创建路径。然后使用您已经必须正确绘制它们的路径功能。

一旦你这样做了，你会发现你仍然看不到任何东西，那是因为你的地图以错误的地方为中心，所以纽约市不在你的视口范围内。您可以使用 d3 来准确找出您必须在哪里放置地图，以及必须缩放多少。但这有点复杂。如此快速的解决方案就是进一步放大地图。

var projection = d3.geo.mercator()
  .scale(10000)
  .translate([width / 2, height / 2]);

然后等待创建路径函数，直到加载 GeoJSON。因为这样你就可以用 d3.geo.centroid 函数找到它的中心。

var center = d3.geo.centroid(NYC_MapInfo);
projection.center(center);

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

显示 NYC 的完整代码是：

<script>

  var width = 960, 
      height = 1160;

  var projection = d3.geo.mercator()
    .scale(10000)
    .translate([width / 2, height / 2]);

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

  d3.json("NYC_MapInfo.geojson", function(error, NYC_MapInfo) {

    // after loading geojson, use d3.geo.centroid to find out 
    // where you need to center your map
    var center = d3.geo.centroid(NYC_MapInfo);
    projection.center(center);

    // now you can create new path function with 
    // correctly centered projection
    var path = d3.geo.path().projection(projection);

    // and finally draw the actual polygons
    svg.selectAll("path")
      .data(NYC_MapInfo.features)
      .enter()
      .append("path")
      .attr("d", path);
  });

</script>

您可能需要调整投影中心和比例才能正确显示。查看this thread 了解更多详细信息如何使用代码进行操作。

【讨论】：

你知道如何将csv文件上传到d3地图吗？