1

D3 フレームワーク (http://mbostock.github.com/d3/) を使用して米国の州の輪郭を描画しようとしていますが、実際の SVG データの生成に問題があります。Chloropleth の例に従うようにコードを作成し (このプロジェクトが必要とするものに最もよく似ているため)、提供されたデータが geoJSON 形式であることを確認しました。

問題は、DOM を表示すると、<svg>オブジェクトには<g>要素が 1 つしか含まれておらず (この例では手動で作成したものです)、<path>その下にあるはずの子要素が含まれていないことです。私のコードは例とほとんど同じように見え、データは正しいように見えますが、例で使用する Polygon オブジェクトの代わりに MultiPolygons を出力しています。

私たちのアプリは、jQuery を使用した RoR プロジェクトです (SVG と地理機能には D3 のみを使用しています)。テスト ページは、米国の州のドロップダウン選択からの選択に基づいて、<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 -- >
                                   ]
                                  ]
                                 ]
               }
}

誰かが私たちが間違っていることを教えてくれますか? 私は地理とGISのことは初めてです。それぞれに空のオブジェクトを作成する必要があるdata()ように見えるため（現時点では1つしかありませんが）、D3のドキュメントは不明確なようです（そして理解しにくいようです）。<path>Feature

編集: 生成する geoJSON が GeoRuby gem の geoJSON 拡張によって作成されたことを追加したかっただけです。実際の地図の線は、米国国勢調査局の地図境界ファイルを SQL に変換して postGIS で保存した統合データを基に作成されました。私の一部は、geoJSON 拡張機能が何か間違ったことをしているのではないかと疑っているので、それが私の次の攻撃手段です。

4

1 に答える 1

0

これをあきらめて戻ってきた後、私FeaturesCollectionは実際にはコレクションではないことに気付きました。geoJSON サンプルを調べるときに見落としがちな小さな詳細があります。 の内容はFeaturesCollection、単一のハッシュではなく、ハッシュの配列です。

于 2012-01-07T16:13:41.173 に答える