无法生成 TopoJSON 以与 D3 的 Choropleth 示例一起使用

Question

所以，我一直在学习本教程 https://bl.ocks.org/mbostock/4060606。只需直接复制和粘贴他的代码，我就可以看到这个功能的实际效果。但是，我想做同样的事情，但在州范围内而不是在整个国家范围内。所以我去了人口普查局的网站并下载了密苏伊州各县的 shapefile，但我在重新创建 Mike 的 TopoJSON 文件时遇到了困难。事实上，几天来我一直在处理这个问题，与 TopoJSON 打交道，但我发现的所有示例都使用已弃用的 topojson 命令行工具。由于它不再存在，我不得不自己弄清楚如何以相同的 TopoJSON 格式生成，但没有运气。我根本无法将 Shapefile 转换为 Mike 在本教程中使用的相同 TopoJSON 格式。

这就是我一直以来的做法。我正在从该网站 https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html 获取我的 Shapefile，然后转到“2000 年人口普查”选项卡（因为我不知道如何从该网站仅获取密苏里州的县），然后选择并下载密苏里州。然后我解压缩下载的文件，然后将 .shp 和 .dbf 文件移动到一个单独的文件夹。然后我运行这个命令来生成 GeoJSON 文件：

shp2json c029_d00 -o missouri_geo.json

然后这个命令来制作 TopoJSON 文件

geo2topo missouri_geo.json > missouri_topo.json

当我将我的 TopoJSON 文件的格式与 Mike 的 TopoJSON 文件进行比较时，它们有点相似，但我的 TopoJSON 文件中似乎缺少一堆格式。我知道因为我的文件是由密苏里州的 Shapefile 制作的，所以已经有丢失的数据，但我认为我的 TopoJSON 文件会有像 'id' 属性这样的属性，其中包含县的 FIPS 代码，但我的文件没有那个。我想弄清楚将 Shapefile 转换为 TopoJSON 文件的过程，该文件可以与 Mike 的示例代码一起使用，但我似乎无法弄清楚。

注意我的 javascript 和 html 代码与 Mike 在他的示例中的代码完全相同。在我的 TopoJSON 文件中，我将 "objects":{ 之后的行更改为 "counties" 以匹配 javascript 代码 us.objects.counties 中的行。当我运行我的代码并检查它时，我没有收到任何错误，但没有任何显示。我在浏览器中没有看到任何内容。

非常感谢任何帮助。

Answer 1

在为单个州复制此地图时存在几个潜在的挑战，并且您似乎运行进入了其中的几个。您将需要更多地偏离示例。

首先，您正在下载的地理数据由纬度经度对组成 - 该示例使用的地理数据是预先投影的拓扑json，其大小适合 960x600 笛卡尔平面。您还需要预先投影您的数据（类似于 command line cartography part 1）或使用 geoPath 和 geoProjection 在您的块内动态投影您的数据。 Mike 确实在他的块中使用了 geoProjection，一个空 geoProjection，geoPath 的默认 geoProjection。空投影只是获取 json 中的坐标，并将它们用作 svg 坐标，无需变换。

投影问题可能是既看不到特征也看不到错误的最常见原因。由于您没有指定投影，因此这些功能可能会在屏幕外呈现。由于美国大陆位于西半球，经度值为负 - 美国将被绘制到原点的左侧，即离开屏幕，因为您使用的是空投影。

您的第二个潜在问题是您的数据具有与示例不同的属性：

I thought that my TopoJSON file would have attributes like the 'id' attribute that contains the FIPS codes for the counties

你的拓扑特征属性json：

"properties":{"AREA":0.140669542963654,
"PERIMETER":1.69104063251173,
"CO29_D00_":2,
"CO29_D00_I":1,
"STATE":"29",
"COUNTY":"045",
"NAME":"Clark",
"LSAD":"06",
"LSAD_TRANS":"County"}}

来自shapefile：

由于您使用的来源与 Mike 不同，因此数据的属性可能不同。由于源没有 FIPS ID，您无法像示例中那样在非地理数据和地理特征之间进行连接。但是，有一个不太难的解决方案：

根据您拥有的数据创建 FIPS 代码

来自 NOAA（我找到的最简洁的定义）：

The first two digits are for the State and the last three identify the County, or county equivalent. So, each State has its own 2-digit number, and each County within the state has its own 3-digit number, which are combined into a 5-digit number to uniquely identify every US county. (source)

您有一个代表州和县的数字 - 可以肯定的是，这就是您的 FIPS 县代码。您可以将它们结合起来制作 geo/topojson，您可以在绘制地理 json 要素之前创建一个新的属性：

var features = topojson.feature(us, us.objects.counties).features;
features.forEach(function(d) {
   d.FIPS = "" + d.properties.STATE + d.properties.COUNTY;
})

或者您可以在填充特征时连接字符串和县：

.attr("fill", function(d) { return color(d.rate = unemployment.get(
""+d.properties.STATE+d.properties.COUNTY)); })

Here's 那会是什么样子。

无法生成 TopoJSON 以与 D3 的 Choropleth 示例一起使用

Trouble generating TopoJSON to use with D3's Choropleth example

javascript

shapefile

d3.js

topojson