javascript - 在 D3.js 中使用 geoJSON 数据绘制线条

Question

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

问题是，当我查看 DOM 时，<svg>对象仅包含一个<g>元素(我根据示例手动创建)，并且没有子元素 <path>应该位于其下方的元素。我的代码看起来与示例相当相同，并且我的数据看起来正确，尽管我输出的是 MultiPolygons 而不是示例使用的 Polygon 对象。

我们的应用程序是一个使用 jQuery 的 RoR 项目(我们仅使用 D3 来实现 SVG 和地理功能)。测试页尝试创建 <svg>名为 theArea 的 div 下的元素，基于从美国各州的下拉列表中进行的选择:

$(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()函数，因为它看起来应该创建空白 <path>每个对象 Feature (虽然目前我们只有一个)，但 D3 文档似乎不清楚(并且难以理解)。

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

Answer 1

放弃此操作并返回后，我注意到我的 FeaturesCollection 实际上并不是一个集合。在检查 geoJSON 样本时，有一个很容易被忽视的小细节:FeaturesCollection 的内容是一个哈希数组，而不是单个哈希。