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>

我的输出：纯白色网页

更新的代码：

<!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 已经一个topopjson。您可以在此file（来自同一存储库）中将常规geojson与差异进行对比。

最明显的区别是geojson使用可识别的坐标，而topojson使用弧线，看起来像任意坐标。 Topojsons也完成了规模和翻译价值。

问题

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

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

更改代码只使用你引用的topojson（census_tracts_2010）我得到了：

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

AlbersUSA vs Albers

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

设置地图参数

要设置Albers投影，您需要知道您感兴趣区域的纬度和经度中心。让我们说大概40.7N和74 W - 我使用谷歌地球进行推广然后调整，直到我得到一个愉快的结果。

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

D3中Albers投影的一般模式是：

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地图没有出现

1 个答案:

数据源

问题

AlbersUSA vs Albers

设置地图参数