D3.js에 geoJSON 데이터가있는 선 그리기

D3 프레임 워크 (http://mbostock.github.com/d3/)로 미국 주 개요를 그리려하지만 실제 SVG 데이터를 생성하는 데 문제가 있습니다. 필자는 Chloropleth 예제 (이 프로젝트가 필요로하는 것과 가장 유사)를 따르도록 코드를 작성했으며 제공된 데이터가 geoJSON 형식인지 확인했으며 AFAIK는이 벌금의 백엔드 절반을 가지고 있습니다.D3.js에 geoJSON 데이터가있는 선 그리기

문제 (I은 실시 예에 따라, 수동으로 생성되는) I는 DOM을 보면 <svg> 객체 하나만 <g> 요소를 포함하며, 아이 <path> 요소 없음은 그 아래 것이다. 내 코드는 예제와 상당히 동일하게 보입니다. 예제가 사용하는 Polygon 객체 대신 MultiPolygons를 출력하고 있지만 데이터가 올바르게 보입니다.

우리의 응용 프로그램은 jQuery (우리는 SVG 및 지형 기능에만 D3 만 사용하고 있음)가있는 RoR 프로젝트입니다. 테스트 페이지가 미국의 선택 드롭 다운에서 선택에 따라 theArea라는 DIV 아래 <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); 

    }); 
    }); 
});

{ 
'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 문서는 불분명하고 이해하기 어렵습니다.

EDIT : 우리가 생성하는 geoJSON이 GeoRuby gem의 geoJSON 확장자에 의해 생성되었다고 추가하고 싶습니다. 실제지도 라인은 US 센서스 뷰로의지도 학적 경계 파일이 SQL로 변환되고 postGIS와 함께 저장된 통합 데이터에서 제공되었습니다. 일부는 geoJSON 확장 프로그램이 뭔가 잘못되어있는 것 같아서 다음 번 공격 방법입니다.

출처

2012-01-07 Tom Corelis

이 작업을 포기하고 다시 돌아 오면 내 FeaturesCollection은 실제로 컬렉션이 아니라는 것을 알게되었습니다. geoJSON 샘플을 검토 할 때 간과하기 쉬운 작은 세부 정보가 있습니다. FeaturesCollection의 내용은 해시 배열이 아니고 해시 배열입니다.

출처

2012-01-07 16:13:41

D3.js에 geoJSON 데이터가있는 선 그리기

답변

관련 문제