在 D3.js 中使用 geoJSON 数据绘制线条答案

【问题标题】：Drawing lines with geoJSON data in D3.js在 D3.js 中使用 geoJSON 数据绘制线条
【发布时间】：2012-01-07 14:32:44
【问题描述】：

我正在尝试使用 D3 框架 (http://mbostock.github.com/d3/) 绘制美国各州的轮廓，但在生成实际 SVG 数据时遇到问题。我已经编写了代码以遵循 Chloropleth 示例（因为它最接近该项目所需的内容），确保提供的数据采用 geoJSON 格式，并且 AFAIK 的后端部分工作正常。

问题在于，当我查看 DOM 时，<svg> 对象仅包含一个 <g> 元素（根据示例，我手动创建了该元素），并且没有任何子 <path> 元素应该在它下面。我的代码似乎与示例完全相同，并且我的数据看起来正确，尽管我输出的是 MultiPolygons 而不是示例使用的 Polygon 对象。

我们的应用是一个带有 jQuery 的 RoR 项目（我们只使用 D3 来实现 SVG 和地理功能）。测试页面尝试在名为 theArea 的 div 下创建一个 <svg> 元素，基于从美国各州的下拉选择中进行的选择：

$(document).ready( function() {

  $("#chooser_state").change( function() {

    var status = "#status";
    var statebox = "#chooser_state";
    var theArea = "#theArea"

    var url = "/test/get_state_geom";
    var data = { state: $(statebox).val() };

    $(status).text("Request sent...");

    $.post(url, jQuery.param(data), function(resp) {

      $(status).text("Received response: " + resp["message"]);
      $(theArea).empty();

      var path = d3.geo.path();
      var svg = d3.select(theArea).append("svg");
      var state = svg.append("g").attr("id", "state_view");
      var features = resp.payload.features;

      $(status).text("Created SVG object");

      state.selectAll("path")
        .data(features)
        .enter()
        .append("path")
        .attr("d", path );

    });
  });
});

我们提供给 D3 的数据如下所示：

{
 'type' => 'Feature',
 'id' => '01',
 'properties' => {
                  'name' => 'Colorado'
                 },
 'geometry' => {
                'type' => 'MultiPolygon',
                'coordinates' => [
                                  [
                                   [
                                    [
                                     -106.190553863626,
                                     40.9976070173843
                                    ],
                                    [
                                     -106.061181,
                                     40.996998999999995
                                    ],
                                    < -- and so on -- >
                                   ]
                                  ]
                                 ]
               }
}

有人能告诉我我们做错了什么吗？我是地理和地理信息系统的新手。我怀疑问题出在data() 函数上，因为它看起来应该为每个Feature 创建空白<path> 对象（尽管目前我们只有一个），但D3 文档似乎不清楚（并且难以理解）。

编辑：只是想补充一点，我们生成的 geoJSON 是由 GeoRuby gem 的 geoJSON 扩展创建的。实际的地图线来源于美国人口普查局制图边界文件的合并数据，这些数据被转换为 SQL 并使用 postGIS 保存。我的一部分怀疑 geoJSON 扩展做错了什么，所以这是我的下一个攻击途径。

【问题讨论】：

标签： javascript gis d3.js geojson

【解决方案1】：

在放弃这个然后回来之后，我注意到我的FeaturesCollection 实际上并不是一个集合。在检查 geoJSON 样本时，有一个小细节很容易被忽略：FeaturesCollection 的内容是一个哈希数组，而不是单个哈希。

【讨论】：