Проблемы преобразования из формы в топойсон

Я пытаюсь преобразовать шейп файл мексиканских муниципалитетов в topojson и показывать его с помощью d3.js, используя этот учебник http://bost.ocks.org/mike/map/#converting-data. Мне удалось преобразовать его, но я не могу его отобразить. Любая помощь будет оценена.

Это мой рабочий процесс:

1) Загрузите и распакуйте шейп файл

wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip 
unzip mgm2010v5_0a.zip

2) Преобразование в JSON, перепрограммирование в lat-long и подмножество шейп файла

ogr2ogr  -f GeoJSON -t_srs EPSG:4326 -where "CVE_ENT IN ('09')" df.json Municipios_2010_5A.shp

3) Преобразование в topojson

topojson --id-property OID -p name=OID -p name -o df2.json df.json

4) И создание html-кода

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
height = 1160;

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

 d3.json("df2.json", function(error, df2) {
 svg.append("path")
  .datum(topojson.feature(df2, df2.objects.df))
  .attr("d", d3.geo.path().projection(d3.geo.mercator()));
 });

 </script>

Если я запустил html, я просто получу пустую страницу. Любые идеи о том, что я могу делать неправильно?

Ответ 1

Простейший вариант, если вы специально относитесь к проекции, состоит в том, чтобы просто использовать проекцию, предоставленную шейп файлом (Lambert Conformal Conic). Используйте topojson s --width и --height флаги командной строки для масштабирования проецируемого шейп файла до разумного размера. Например, если вы хотите что-то шириной 960 пикселей, вы можете сказать:

topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp

(Это также удобно упрощает в экранных координатах.)

Полный пример с Makefile находится в bl.ocks.org/9265467:

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

var projection = d3.geo.conicConformal()
    .rotate([102, 0])
    .center([0, 24])
    .parallels([17.5, 29.5])
    .scale(1850)
    .translate([width / 2, height / 2]);

(Скрипт с центром и шкалой, как вам нравится, чтобы соответствовать вашему желаемому окну просмотра.) Этот альтернативный подход демонстрируется на bl.ocks.org/9265674:

Обычно я предпочитаю использовать проецируемые координаты (первый подход, выше), поскольку они быстрее визуализируются и упрощение является более эффективным. С другой стороны, если вы хотите динамически изменить проекцию - по общему признанию, маловероятно с таким сложным шейп файлом, то проецирование в браузере - путь. И проецирование в браузере приятно во время разработки, потому что его легче изменить параметры и перезагрузить.