用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])

您不需要将.center与x值一起使用，因为地图已经通过旋转居中于x，旋转和居中是累积的

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

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

• 使用投影平移使地图居中

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

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要点。