使用d3渲染geoJSON

Question

使用d3渲染geoJSON

3

我有一个geoJSON文件，想用d3来渲染，但是很难针对正确的特征进行投影。

目前，我已经在很多d3示例中找到了us.json文件，但我目前正在处理的地图使用美国“通勤区”（CZ）而不是土地、州或县。

我习惯于调用

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

为了显示正确的图层，但我的文件没有组织成对象，也没有多个图层。这是我尝试使用的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”，当我将文件拖入Mapshaper时，它会正确呈现一个名为“CZ90”的图层，这就是我写“us.CZ90”而不是“us.objects.states”的原因。

我意识到我调用的是“topojson.feature”，而不是特定于geoJSON的内容，但我也无法在Mapshaper中成功转换文件为topoJSON格式，而不失去投影类型/信息。

在.datum调用中正确定位此图层的方法是什么？

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

- MatOwen11

请查看此链接：http://bl.ocks.org/minikomi/4043986 - Eric Guan

2个回答

0

我可能有所遗漏，但是如果您查看topojson文档，您会注意到topojson.feature:

返回给定拓扑中指定对象的GeoJSON Feature或FeatureCollection。如果指定的对象是一个GeometryCollection，则返回一个FeatureCollection，并且集合中的每个几何体都映射到一个Feature。否则，返回一个要素。

在d3文档中，您会注意到一个d3 geopath：

渲染给定的任何GeoJSON要素的对象

因此，关于：

我意识到我正在调用“topojson.feature”而不是特定于geoJSON的内容

您已经在使用特定于geoJSON的内容，您只需要使用topojson.js将您的topoJSON转换回geoJSON，以便在D3地图中使用。因此，针对您的问题，答案如下：

如何在.datum调用中正确地针对此图层？

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

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

这将追加一个单一的路径，但如果您想要追加多个具有相同数据集的路径（例如用于不同的着色或鼠标交互）：

.data(us.features) // feature collection

- Andrew Reid

抱歉回复晚了，感谢帮助！终于有时间发布我找到的解决方案。 - MatOwen11

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MatOwen11 · Accepted Answer

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

看起来 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>

希望这能帮助到其他遇到类似困境的人！