使用 D3 v4 映射内布拉斯加州学区 - 基础层未显示

Question

我在绘制 D3 (v4) 中的内布拉斯加州学区地图时遇到问题。（参见 bl.ock here。）我可以绘制内布拉斯加州县的地图没问题，但是为学区修改了相同的代码——并指向学区 TopoJSON 文件——给我一个空白页。

以下是我基于 Mike Bostock's excellent instructions 创建 JSON 的方法：

curl "https://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_31_unsd_500k.zip" -o cb_2017_31_unsd_500k.zip

unzip -o cb_2017_31_unsd_500k.zip
shp2json cb_2017_31_unsd_500k.shp -o ne_district.json
ndjson-split "d.features" < ne_district.json > ne_district.ndjson
ndjson-map "d.id = d.properties.GEOID, d" < ne_district.ndjson > ne_district-id.ndjson
geo2topo -n districts=ne_district-id.ndjson > ne_district-id-topo.json

这是我的预测：

var projection = d3.geoConicConformal()
   .parallels([40, 43])
   .rotate([100, 0])
   .scale(8000);

感谢您的帮助，对于我遗漏的任何重要事项提前致歉！

Answer 1

问题是您还没有完成投影参数的设置。您已经旋转了地图，这就是您应该如何将圆锥投影沿 x 轴居中。但是您没有将地图置于 y 轴的中心，它以赤道为中心。你

对于圆锥形投影，您可以通过以下三种方式之一执行此操作：

将地图居中放置在中央纬度上：projection.center([0,y])

您不需要使用带有 x 值的 .center，因为地图已经通过旋转以 x 为中心，旋转和居中是累积的

将地图旋转到中心经纬度：projection.rotate([-x,-y])

在圆锥投影上，子午线上的旋转不会扭曲地图（通常），当我们在我们下方移动地球时，我们旋转负数。相对于其他选项，此选项确实会略微扭曲地图 - 这可能更可取。

使用投影平移使地图居中

最简单的方法是使用 projection.fitSize 或 projection.fitExtent 在自动缩放的同时平移结果（尽管您也可以手动执行此操作）。这些方法修改 projection.scale 和 projection.translate。与使用 .center 居中一样，您需要保持旋转 - 否则地图会出现奇怪的倾斜。这些方法将转换和缩放设置为适当的值，以便您的地图区域包含所需的功能：

var featureCollection = topojson.feature(ne, ne.objects.districts);
projection.fitSize([width,height],featureCollection);

这些方法必须接受对象，而不是数组，所以我们使用 featureCollection，而不是将特征作为数组

这两种方法都采用指定大小的数组来拉伸提供的 geojson 对象：

projection.fitSize([mapwidth,mapheight],geojsonObject)
projection.fitExtent([[left,top],[right,bottom]],geojsonObject)

这是使用 fitSize 的 updated 要点。

使用 D3 v4 映射内布拉斯加州学区 - 基础层未显示

Mapping Nebraska school districts with D3 v4 - base layer not showing

json

geojson

d3.js

topojson