javascript - 客户端 topojson 呈现看似不正确的路径

标签 javascript d3.js topojson

我一直在尝试创建一个包含合并图层数据的 TopoJson 文件,其中包含美国各州、县和国会选区等图层。

原始 .shp shapefile 来自人口普查局的 Cartographic Boundary Files

这些通过 ogr2ogr 转换为 GeoJson。

然后通过节点服务器端库组合成TopoJson格式,量化为1e7,保留比例为0.15。到目前为止,没有任何问题的迹象。

我使用 mapshaper 查看最终的 topojson 文件,看起来一切正常:rendered via mapshaper

但是,当尝试使用 topojson 客户端库和 D3.geo.path() 进行渲染时,我在 congressionalDist 层中遇到了一些奇怪的路径:(注意美国大陆、AK 和 HI 周围的大矩形路径)square paths

可以在此处找到该页面的工作版本:http://jsl6906.net/D3/topojson_problem/map/

几个相关的注释:

  • 如果我更改我的 topojson 生成脚本以删除简化,则路径似乎会通过相同的 d3.js 页面正确显示
  • 如果我在创建 topojson 时只保留 congressionalDist 层,那么路径似乎会通过相同的 d3.js 页面正确显示:

good

在尝试尽可能多的故障排除后,我想我应该问问这里的人,看看是否有人遇到过任何类似的问题。感谢您的帮助。

最佳答案

正如我在评论中提到的,我注意到三个有问题的矩形都绑定(bind)到具有以 ZZ 结尾的 id 属性的数据,而所有其他路径都有以数字结尾的 ID。

经过 Google 搜索后,我得出了我认为的答案。

根据 this document在 census.gov 网站上,

In Connecticut, Illinois, and Michigan the state participant did not assign the current (113th) congressional districts to cover all of the state or equivalent area. The code “ZZ” has been assigned to areas with no congressional district defined (usually large water bodies). These unassigned areas are treated within state as a single congressional district for purposes of data presentation.

似乎这三个未定义的区域将占三个矩形。目前尚不清楚他们在过程中的什么时候引起了问题,但我相信有一个简单的解决方案可以解决您眼前的问题。在搜索有关 ZZ 代码的信息时,我偶然发现了 this makefile在 mbostock 的一个名为 us-atlas 的项目中.

他似乎遇到了类似的问题,并且在运行 ogr2ogr 时成功地过滤掉了未定义的国会选区。这是该文件中的相关代码:

# remove undefined congressional districts
shp/us/congress-ungrouped.shp: shp/us/congress-unfiltered.shp
    rm -f $@
    ogr2ogr -f 'ESRI Shapefile' -where "GEOID NOT LIKE '%ZZ'" $@ $<

我敢打赌,如果您使用此处显示的标志在您的 shapefile 上运行 ogr2ogr,它将解决问题。

关于javascript - 客户端 topojson 呈现看似不正确的路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24049485/

相关文章:

javascript - 将参数传递到 FOR 循环中

javascript - 让用户通过 javascript 访问 cookie 是一个安全问题吗

javascript - Chrome 与 d3 的foreignObject bug?

javascript - 如何在D3中的不同行上打印工具提示的内容

javascript - 使用 d3 和 topojson 绘制 map

javascript - 使用 D3 和 TopoJson 显示地点(城市)数据

javascript - 把字符串变成数组?

javascript - 无法将外部 Javascript 与 D3JS 链接

svg - 使SVG路径像一条平滑的线,而不是参差不齐

javascript - 如何在点上应用渐变蒙版