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

Creating a d3 map of nyc boroughs using JS and a geojson file

本文关键字：行政区 d3 地图 纽约市 文件创建 JS geojson 使用      更新时间：2023-09-26

几周来，我一直在尝试创建一个 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

您正在从 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>

您可能需要摆弄投影中心和缩放才能正确显示它。查看此线程以获取有关如何使用代码执行此操作的更多详细信息。

相关文章：