javascript - 使用 D3 和 topojson 时路径困惑?

标签 javascript d3.js maps topojson map-projections

一点预警:对于 D3 来说还是个新手。

现在,我正在关注 Mike Bostock 的 Let's Make a Map指南,但我使用的是加拿大艾伯塔省选区的 map ,而不是英国。更改 Bostock 的代码以使用艾伯塔省数据加载我自己的 TopoJSON 后,here is what appears .

我花了很多时间试图弄清楚我是否没有在代码中发现错误,或者地理数据中是否可能存在某种错误,但我无法准确缩小范围问题可能在于。基于这里的其他一些问题,我怀疑这可能与预测有关,也许与博斯托克代表英国的方式与我需要做的正确代表艾伯塔省的方式的差异有关,但是说到这里我真的很茫然。

需要注意的是,JS控制台会弹出错误:Error: Invalid value for <path> attribute这让我怀疑 TopoJSON 数据是否有问题,但是当我将相同的数据拉入 Mapshaper 时, map 显示没有错误。

因此,我有点陷入困境,不确定如何继续。感谢任何形式的帮助/指导,谢谢!

最佳答案

您的地理数据有问题。貌似已经预定了?我将其加载到 QGIS 中,虽然数据看起来不错,但似乎已经应用了投影。我在 http://www.electionsalberta.ab.ca/Public%20Website/112.htm 找到了一些艾伯塔省选区数据当我从那里加载形状文件时,两者不会重叠。不确定发生了什么,但在显示之前进行的任何处理都会导致一些问题。另外,尝试使用 fill: nonelines: black 设计路径,使其看起来更整洁

更新:

在艾伯塔省选举局提供的 zip 中,有一个包含投影的 .prj 文件,正如您怀疑的那样,该文件是 NAD83,艾伯塔横轴墨卡托投影。 Mapshaper 和其他人向您展示了这个投影文件,然后生成投影文件的 topojson。

为了创建一个“未投影”文件,我将提供的zip作为矢量图层加载到QGIS中,然后将其另存为新图层,但更改了坐标引用系(CRS,换句话说,投影)过程,至 WGS 84。

然后我使用 topojson 将保存的结果转换为 topojson 文件。

我已经创建了一个要点/ block 供您查看使用您的代码和我更新的文件。您可以通过http://bl.ocks.org/benlyall/4f2e4ed1e8f4bdb8457c查看

我所做的只是使用 QGIS 中不同的坐标引用系统保存文件,然后将其加载到现有页面中。希望这会有所帮助。

回答您评论中的几个问题:

  1. 该文件已由艾伯塔省选举局预测,但有可能在流程中的任何时刻进行预测。您可以随时在投影之间进行转换,事实上,当您在 javascript 中应用投影时,您就可以进行转换。投影只是将一个系统的坐标转换为另一个系统的坐标。就您而言,我们将从 NAD83/艾伯塔横轴墨卡托投影转换到 WGS 84,再回到墨卡托投影。有关 NAD83/Alberta TM 的更多信息,请查看 http://georepository.com/crs_3403/NAD83-CSRS-Alberta-10-TM-Resource.html

  2. Mapshaper 和 topojson 正在读取您的 shapefile 并为您显示它。它可能对您来说看起来不错,因为这就是您在 map 上看到的该地区的样子。目前尚不清楚的是源数据是否已被预测。我通过使用 WGS 84 投影将 topojson 数据加载到 QGIS 中(因为这通常是我们开始的方式),然后加载到艾伯塔省选举数据(其中包括 .prj 文件),发现没有重叠。这有点泄露了其中一个的预测与另一个的不同。由于您是在 Stack Overflow 上提问的人,我认为艾伯塔省选举数据可能是正确的。就在那时,我开始查看您的 topojson 文件,发现其中的坐标很大,即。在 -/+180、-/+90 之外,这意味着它可能在创建之前已被投影。

    d3 可以按照 http://bl.ocks.org/mbostock/5557726 传入 null 投影来加载已投影的 topojson 数据。 ,但在这种情况下,它期望您的 topojson 文件中的坐标为像素,如果您查看您的 topojson 文件,它们太大而无法被考虑像素值,所以它们不会那样工作。

  3. 我刚刚做了

    ogr2ogr -t_srs crs:84 alberta_wgs84 EDs_Act2010_FINAL.shp
    

    然后我使用 topojson 对其进行转换,并根据我的 QGIS 重新投影文件正确加载。所以我不确定你的转换出了什么问题。重新投影如何完成并不重要,重要的是它就是这样。您绝对走在正确的道路上。

关于javascript - 使用 D3 和 topojson 时路径困惑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29321311/

相关文章:

javascript - 如何将 x、y、y0 以外的属性附加到 d3 中的流图层?

javascript - d3.js - 基于文本宽度的文本位置

testing - 如何在 Golang 中测试 map 的等价性?

javascript - 从 map 上绘制的正方形获取经纬度或在 map 上可视化圆圈

javascript - 表单重置后立即执行代码

javascript - 链式 promise 并装饰对象

javascript - 如何将对 $data 的更改传播回 Knockout 的 View 模型?

javascript - 如何在d3中的平行坐标图中为线条着色?

javascript - Google Maps API 方向中的标识符

javascript - 轮询卡住、Pebble.js、ajax、node.js