D3フレームワーク（http://mbostock.github.com/d3/）で米国の州の概要を描画しようとしていますが、実際のSVGデータを生成する際に問題があります。私はChloroplethの例に従うようにコードを書いています（このプロジェクトが必要とするものに最も似ています）。提供されたデータがgeoJSON形式であることを確認しました。AFAIKは、D3.jsのgeoJSONデータを含む線の描画
問題は、（Iは、例えば当たり、手動で作成した）私はDOMを表示するとき、<svg>オブジェクトは一つだけ<g>元素を含有することで、子<path>要素のいずれも、そのその下にすべきです。私のコードは例とかなり同じように見えますが、データが正しく表示されていますが、例で使用されているPolygonオブジェクトの代わりにMultiPolygonsを出力しています。
私たちのアプリは、jQueryを使ったRoRプロジェクトです（私たちはSVGと地理学の機能にはD3しか使用していません）。
$(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 -- >
]
]
]
}
}
theAreaと呼ばれるdivの下
<svg>要素を作成しよう
誰かが私たちが間違っていることを私に手がかりにすることはできますか？私は地理とGISのものに新しいです。私はこの問題がdata()関数にあると考えています.の空白をそれぞれ<path>のオブジェクトとして作成する必要がありますが（現時点では1つしかありませんが）、D3のドキュメントは不明確です。
EDIT：私たちが生成するgeoJSONは、GeoRuby gemのgeoJSON拡張によって作成されたものです。実際のマップ行は、米国国勢調査局の地図境界ファイル（SQLに変換され、postGISで保存された）の統合データから供給されました。私の一部は、geoJSON拡張機能が何か間違っていると思うので、それが私の次の攻撃の道です。