Рисование линий с данными geoJSON в D3.js - PullRequest
Новая
       14

Рисование линий с данными geoJSON в D3.js

1 голос
/ 07 января 2012

Я пытаюсь нарисовать контуры штатов США с помощью инфраструктуры D3 (http://mbostock.github.com/d3/), но у меня возникают проблемы при создании фактических данных SVG. Я написал свой код, чтобы следовать примеру Chloropleth (так как он наиболее близко напоминает, что этот проект) потребности), убедитесь, что предоставленные данные представлены в формате geoJSON, а AFAIK имеет внутреннюю половину этого рабочего штрафа.

Проблема в том, что когда я просматриваю DOM, объект <svg> содержит только один элемент <g> (который я создал вручную в соответствии с примером) и ни один из дочерних элементов <path>, которые должны находиться под ним. Мой код, кажется, довольно идентичен примеру, и мои данные выглядят корректно, хотя я выводил MultiPolygons вместо объекта Polygon, который используется в примере.

Наше приложение представляет собой проект RoR с jQuery (мы используем только 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 -- >
                                   ]
                                  ]
                                 ]
               }
}

Может кто-нибудь подсказать мне, что мы делаем не так? Я новичок в гео и ГИС. Я подозреваю, что проблема заключается в функции data(), так как похоже, что она должна создавать пустые <path> объекты для каждого Feature (хотя у нас есть только один, на данный момент), но документация D3 кажется неясной ( и трудно понять).

EDIT: Я просто хотел добавить, что сгенерированный нами geoJSON был создан расширением geoJSON для гема GeoRuby. Фактические линии карты были получены из консолидированных данных картографических граничных файлов Бюро переписи США, которые были преобразованы в SQL и сохранены с помощью postGIS. Часть меня подозревает, что расширение geoJSON делает что-то не так, так что это мой следующий путь атаки.

1 Ответ

0 голосов
/ 07 января 2012

Отказавшись от этого и затем вернувшись, я заметил, что мой FeaturesCollection, на самом деле, не был коллекцией.Есть небольшая деталь, которую легко упустить при рассмотрении примеров geoJSON: содержимое FeaturesCollection представляет собой массив хешей, а не один хеш.

...