使用 d3 渲染 geoJSON

Question

我有一个 geoJSON 文件，我正在尝试使用 d3 进行渲染，但我很难找到正确的投影功能。

目前我一直在使用许多 d3 示例中的 us.json 文件，但我目前正在处理的地图使用美国 "Commuting Zones"（CZ's）土地、州或县。

我习惯打电话

topojson.feature(us, us.objects.states)

以显示正确的层，但是我的文件没有组织成 object 并且没有多层。这是我尝试使用的 geoJSON 文件的摘录：

{"type":"FeatureCollection","bbox":[-120.30602148510043,6.667736880597216,-70.95829310710806,34.46308750538215],"features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-83.802805983004,22.64602264051764],[-83.8080569412408,22.638128812605782],

这是我渲染失败的代码：

d3.json("CZ90.zip.geojson", function(error, us) {
    if (error) throw error;

    d3.select("svg").append("path")
        .datum(topojson.feature(us, us.CZ90))
        .attr("d", d3.geo.path());
});

因为没有 object，所以我省略了“.object”，当我将文件放入 Mapshaper 时，它会正确呈现一个名为 "CZ90" 的图层，它是我是如何写成 "us.CZ90" 而不是 "us.objects.states"

我意识到我正在调用 "topojson.feature" 而不是特定于 geoJSON 的东西，但我也无法在不丢失投影的情况下成功地将文件转换为 Mapshaper 中的 topoJSON type/info。

在 .datum 调用中以该图层为目标的正确方法是什么？

如果我能找到像 us.json 这样包含通勤区层的 topoJSON 文件，整个问题也将得到解决！

Answer 1

我可能在这里遗漏了一些东西，但是如果你看一下 topojson 文档，你会注意到 topojson.feature:

Returns the GeoJSON Feature or FeatureCollection for the specified object in the given topology. If the specified object is a GeometryCollection, a FeatureCollection is returned, and each geometry in the collection is mapped to a Feature. Otherwise, a Feature is returned.

在 d3 文档中，您会注意到 d3 地理路径：

Renders the given object, which may be any GeoJSON feature

所以关于：

I realize I'm calling "topojson.feature" instead of something geoJSON specific

您已经在使用特定于 geoJSON 的东西，您只需使用 topojson.js 将您的 topoJSON 转换回 geoJSON，以便它可以在 D3 地图中使用。所以回答你的问题：

What is the correct way to target this layer in the .datum call?

正确的方法是简单地使用：

.datum(us) // feature collection or single feature

这将附加一个路径，但如果您想为同一数据集附加多个路径（比如不同的颜色或鼠标交互）：

.data(us.features) // feature collection

Answer 2

最终从我的开发人员朋友那里得到了一些帮助，答案比我的问题要简单得多。

似乎 d3.json() 本身就适合读取我的 geoJSON 文件的结构，而无需使用 datum() 所需要的只是调用：

d3.json("CZ90.zip.geojson", function(error, geoData) {
    d3.select("svg").append("path")
        .attr("d", path(geoData));
}

注意：这是使用 d3.v4

这是能够成功渲染地图的完整脚本：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path {
      fill: #ccc;
      stroke: #fff;
      stroke-linejoin: round;
    }
</style>

<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>

<script>

var width = 960;
var height = 620;

var chosenProjection = d3.geoMercator()
  .scale(600)
  .translate([1300, 450])

  var path = d3.geoPath()
    .projection(chosenProjection);

d3.json("CZ90.zip.geojson", function(error, geoData) {

  d3.select("svg").append("path")
      .attr("d", path(geoData));
});

</script>

希望这能帮助遇到如此简单障碍的其他人！

使用 d3 渲染 geoJSON

Render geoJSON with d3

javascript

json

geojson

d3.js

topojson