Question

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

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

我们的应用程序是一个带有jQuery的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 -- >
                                   ]
                                  ]
                                 ]
               }
}

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

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

Answer 1

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

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

1 个答案: