在D3.js中繪製帶有geoJSON數據的線

我試圖用D3框架（http://mbostock.github.com/d3/）繪製美國狀態輪廓線，但是在生成實際的SVG數據時出現問題。我已經編寫了我的代碼來跟蹤Chloropleth示例（因爲它與本項目需要的內容最爲相似），確保提供的數據採用geoJSON格式，並且AFAIK的後端部分工作正常。在D3.js中繪製帶有geoJSON數據的線

的問題是，當我觀看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 -- > 
            ] 
            ] 
           ] 
       } 
}

有人能告訴我我們做錯了什麼嗎？我是地理和GIS的新手。我懷疑問題在於data()函數，因爲它看起來應該是爲每個Feature創建空白對象<path>（儘管目前我們只有一個），但D3文檔似乎不清楚（並且難以理解）。

編輯：只是想補充說我們生成的geoJSON是由GeoJson gem的geoJSON擴展創建的。實際的地圖線來源於美國人口普查局製圖邊界文件的統一數據，這些文件被轉換爲SQL並通過postGIS保存。部分我懷疑geoJSON擴展做錯了，所以這是我的下一個攻擊途徑。

來源

2012-01-07 Tom Corelis