Geojson 地图未显示

Question

我正在努力创建地图。我只是从这里 ( https://github.com/dwillis/nyc-maps ) 使用纽约时报 geojsons ("census_tracts_2010.geojson") 之一。

如果有人可以查看我下面的代码，并告诉我为什么没有地图显示给我，尤其是我没有错误，我将不胜感激。如果有什么地方不对，那么它可能在最后两行。

第 1 步 - 将 GEOJSON 转换为 TOPOJSON 运行这个在终端

geo2topo census_tracts_2010.geojson > nyc2.json

第 2 步已创建 index.html （灵感来自 https://bost.ocks.org/mike/map/）

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var width = 960,
    height = 1160;

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

d3.json("nyc2.json", function(error, uk) {
  if (error) return console.error(error);
  console.log(uk.objects)
  console.log(uk.objects.census_tracts_2010)
  svg.append("path")
      .datum(topojson.feature(uk, uk.objects.census_tracts_2010))
      .attr("d", d3.geo.path().projection(d3.geo.albersUsa()));


});

</script>

我的output:Plain白色网页

更新代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var width = 500,
    height = 500;

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

d3.json("census_tracts_2010.geojson", function(error, uk) {
  if (error) return console.error(error);

  var subunits = topojson.feature(uk, uk.objects.nyct2010);

  var projection = d3.geo.albers()
   .center([0,40.7])
   .rotate([-74,0])
   .translate([width/2,height/2])
   .scale(65000);

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

    svg.append("path")
        .datum(subunits)
        .attr("d", path);
});

</script>

Answer 1

数据源

首先，您引用的 file is already a topopjson. You can contrast the differences with a regular geojson in this file（来自同一存储库）。

最明显的区别是 geojson 使用可识别的坐标，而 topojson 使用弧和可能看起来像任意坐标的坐标。 Topojsons 还以缩放和转换值结束。

问题

为什么你的地图没有出现？好吧，这可能是因为在对已经是 topojson 的文件进行 topojsoning 时出现问题，但更可能的选择 - 以及涉及您的其他问题的选择 - 是您没有将地图聚焦在您感兴趣的区域。这似乎也是您上一个问题中的问题。

您正在使用 geo.albersUsa 投影 - 默认情况下它聚焦于整个美国大陆（这是一个复合投影，因此它包括 space 阿拉斯加和夏威夷）。

仅更改您的代码以使用您引用的 topojson (census_tracts_2010) 我得到：

您的地图显示正确 - 或者至少按编码显示 - 但整个感兴趣区域看起来可能是一只快速撞击屏幕的小昆虫。

阿尔伯斯美国 vs 阿尔伯斯

您将需要修改您的地图投影参数，但如果您想保留 AlbersUSA 投影，您将无法居中或旋转，而是使用普通的 Albers 投影。 AlbersUsa 适用于整个国家，我认为它没有居中或旋转方法。

设置地图参数

要设置阿尔伯斯投影，您需要知道感兴趣区域的经纬度中心。比方说 40.7N 和 74W - 我用 Google Earth 概括然后调整，直到我得到一个令人满意的结果。

一般来说，对于阿尔伯斯，您还想知道您的标准平行线；但是，在 d3 中，默认平行线是针对美国的。是的，它们可以更具体地用于您的投影（通过选择与您感兴趣区域的上部和下部相交的两条平行线），但我会在这个答案中将它们排除在外。

D3 中阿尔伯斯投影的一般模式是：

var projection = d3.geo.albers()
   .center([0,y])
   .rotate([-x,0])
   .parallels([a,b]) // don't worry about this in this instance
   .translate([width/2,height/2])
   .scale(k);

使用上面的中心坐标并尝试缩小比例我得到了这个：

使用：

var projection = d3.geo.albers()
   .center([0,40.7])
   .rotate([74,0])
   .translate([width/2,height/2])
   .scale(65000);

注意：我已将您的 svg 尺寸修改为更适合您感兴趣区域的形状（与创建英国地图的演示中的参考地图尺寸相反）。我的尺寸是：500 x 500。

Albers 投影参数的相对更详细的解释在此 answer。

Geojson 地图未显示

Geojson map not showing up

javascript

json

geojson

d3.js

topojson

数据源

问题

阿尔伯斯美国 vs 阿尔伯斯

设置地图参数