1

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

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

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

$(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 扩展创建的。实际的地图线来源于美国人口普查局制图边界文件的合并数据，这些数据被转换为 SQL 并使用 postGIS 保存。我的一部分怀疑 geoJSON 扩展做错了什么，所以这是我的下一个攻击途径。

4

1 回答 1

0

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

于 2012-01-07T16:13:41.173 回答