Javascript Geojson地图未显示_Javascript_Json_D3.js_Geojson_Topojson

Javascript Geojson地图未显示

javascript json d3.js

Javascript Geojson地图未显示,javascript,json,d3.js,geojson,topojson,Javascript,Json,D3.js,Geojson,Topojson,我正在努力创建地图。我只是在这里使用《纽约时报》的一个geojson（“census\u Tracs\u 2010.geojson”）如果有人能看看我下面的代码，让我知道为什么没有地图显示给我，特别是我没有错误，我将不胜感激。如果有什么不对劲，那么可能是在最后两行步骤1-将GEOJSON转换为TOPOJSON 在终点站运行这个 geo2topo census_tracts_2010.geojson > nyc2.json 步骤2 已创建index.html （灵感来自）可变宽度=

我正在努力创建地图。我只是在这里使用《纽约时报》的一个geojson（“census\u Tracs\u 2010.geojson”）

如果有人能看看我下面的代码，让我知道为什么没有地图显示给我，特别是我没有错误，我将不胜感激。如果有什么不对劲，那么可能是在最后两行

步骤1-将GEOJSON转换为TOPOJSON 在终点站运行这个

geo2topo census_tracts_2010.geojson > nyc2.json

步骤2 已创建index.html （灵感来自）


可变宽度=960，
高度=1160；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“nyc2.json”，函数（错误，英国）{
if（error）返回控制台。error（error）；
console.log（uk.objects）
console.log（uk.objects.census\u Tracs\u 2010）
追加（“路径”）
.datum（topojson.feature（uk，uk.objects.census_tracts_2010））
.attr（“d”，d3.geo.path（）.projection（d3.geo.albersUsa（））；
});

我的输出：纯白色网页

更新代码：

<!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>


可变宽度=500，
高度=500；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“普查数据集2010.geojson”），函数（错误，英国）{
if（error）返回控制台。error（error）；
var subunits=topojson.feature（uk，uk.objects.nyct2010）；
var projection=d3.geo.albers（）
.中心（[0,40.7]）
.旋转（[-74,0]）
.translate（[宽度/2，高度/2]）
.比例尺（65000）；
var path=d3.geo.path（）
.投影（投影）；
追加（“路径”）
.数据（子单元）
.attr（“d”，路径）；
});

数据源首先，您引用的已经是topopjson。您可以在此（来自同一存储库）中将这些差异与常规geojson进行对比

最明显的区别是geojson使用可识别的坐标，而topojson使用弧和看起来像任意坐标的东西。TopoJSON还可以完成缩放和平移值

问题为什么你的地图没有出现？这可能是因为topojson中存在的问题：定义一个已经是topojson的文件，但更可能的选择是，您没有将地图集中在您感兴趣的区域上，这一选择涉及到您的另一个问题。这似乎也是您上一个问题中的问题

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

仅将代码更改为使用您引用的topojson（），我得到：

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

阿尔伯苏萨vs阿尔伯斯您将需要修改地图投影参数，但如果要保留AlbersUSA投影，您将无法居中或旋转，请改用普通Albers投影。AlbersUsa适用于整个国家，我不相信它有定心或旋转方法

设置地图参数要设置阿尔伯斯投影，您需要知道感兴趣区域的经纬度中心。比如说40.7N和74W——我用谷歌地球进行了概括，然后进行了调整，直到得到了一个令人满意的结果

一般来说，对于阿尔伯斯，你还想知道你的标准平行线；然而，在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

关于阿尔伯斯投影参数的相对更详细的解释见此。

嗨，安德鲁！谢谢你详细的回答。很难找到关于这个主题的教程和易于理解的文档。我能够按照你的指示一直到“阿尔伯斯vs阿尔伯斯美国”，使用阿尔伯斯，我也能够让小地图显示出来。但是，在编辑投影和svg大小后，什么也没有显示。当我试图改变时，小地图消失了。你介意看看我上面更新的代码吗？我想问题是你用-74作为你的x轴旋转。旋转与你想要的相反（我认为它是在地图下旋转地球），试试（+）74，看看会发生什么。看看答案，我的错，我不知何故在答案的示例参数中添加了负号-我现在更新了它。我为这个小错误道歉，单个字符有时会让生活变得悲惨。我同意很难找到关于投影（d3或其他）的教程和简单文档，我多次使用“让我们制作一张地图”地图来尝试理解其中的一些内容。老实说，这是我找到的唯一教程，你的答案和示例非常有帮助！你应该考虑自己做一个教程/博客。

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