Построение файла topojson с помощью d3.js (районы Нью-Йорка и переписные участки)

вот первый topojson вопрос по так. У меня проблемы с отображением карты (районы Нью-Йорка), и я не могу понять, почему. Приведенный ниже код является копией этого примера с другим файлом topojson. Я загрузил файл здесь. Ниже также приведены подробности о том, как я создал файл. Прямо сейчас, я просто получаю хаотичные линии. Возможно, причина в файле topojson, но я не знаю, что не так.

ps: я не смог пометить это как topojson, потому что этот тег раньше не использовался

Файл TopoJSON

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

(В разделе «Районы и районы» файл «Районы» (слева), шейп-файл ArcView)

2) Упростить шейп-файл с помощью QGis

3) Преобразовать в TopoJSON с помощью

ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json

HTML/JS-код

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

.boundary {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

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

var width = 960,
    height = 500;

var path = d3.geo.path();

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

d3.json("/geo/nybb.json", function(error, topology) {
  svg.append("path")
      .datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0]))
      .attr("d", path)
      .attr("class", "boundary");
});

</script>

d3.js shapefile map-projections
person user2503795    schedule 26.12.2012    source источник
comment
Просто предположение. Попробуйте повторно спроецировать шейп-файл в wgs84 и повторите попытку.   -  person decio    schedule 27.12.2012

Ответы (1)


arrow_upward
6
arrow_downward

Как также было предложено в комментарии пользователя 10579, мне удалось решить проблему, перепроецировав шейп-файл в NAD83 (EPSG 4269). После создания файла topojson из перепроецированного шейп-файла d3.js показывает карту с

var projection = d3.geo.albers();
var path = d3.geo.path().projection(projection);

Вторая проблема, с которой я столкнулся, была связана с правильным центрированием, масштабированием и переводом значений. С приведенным выше кодом nyc будет просто маленькой точкой с большим количеством пробелов. Поиск правильного значения центра, масштаба и перевода может быть немного утомительным. В конце концов, я добавил приведенный ниже код, который позволяет вам перетаскивать карту и прокручивать ее, чтобы изменить параметр масштаба. Значения отображаются после каждого изменения, поэтому можно легко поместить карту в нужное место и просто принять последние параметры из вывода консоли.

  svg.call(d3.behavior.zoom()
          .translate(projection.translate())
          .scale(projection.scale())
          .on("zoom", redraw));

  function redraw() {
      if (d3.event) {
        projection
          .translate(d3.event.translate)
          .scale(d3.event.scale);
      }
      map.datum(topojson.object(topology, topology.objects.nyct2010))
        .attr("d", path)
        .attr("class", "boundary");
      console.log("Current scale:" + projection.scale())
      console.log("Current translate:" + projection.translate())
      console.log("Current rotate:" + projection.rotate())
  }
person user2503795    schedule 27.12.2012
comment
Каково определение переменной карты? - person Josh Marcus; 01.02.2013
comment
не могли бы вы предоставить ссылку на JS Fiddle? - person clhenrick; 22.04.2014