масштабирование d3.js проекций - PullRequest
Новая
       18

масштабирование d3.js проекций

6 голосов
/ 09 марта 2012

Я пытаюсь нарисовать карту Нью-Йорка, используя d3. Я скачал кучу шейп-файлов из http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml. Я конвертировал их в geoJSON, используя http://converter.mygeodata.eu/,, так что они в WGS 84 (я думаю, широта и долгота).

Я почти уверен, что geoJSON действителен: я могу нарисовать его, используя matplotlib, и он выглядит как Нью-Йорк Сити, и числа, кажется, находятся в допустимом диапазоне. Вот мой JavaScript: 

var path = d3.geo.path()
d3.select("body")
  .append("svg")
    .attr("height", 1000)
    .attr("width", 1000)
  .append("g")
  .selectAll("path")
  .data(data.features)
  .enter()
  .append("path")
    .attr("d", path)
    .style("stroke","black")
    .style("stroke-width","1px")

На этой диаграмме, согласно рекламе, показан прогноз Альберса в Нью-Йорке. Проблема, я думаю, в том, что масштаб проекции выбран так, что США вписываются в красивую веб-страницу, делая пути для Нью-Йорка немного извилистыми в правой части экрана.

Каков «правильный» способ (давайте попробуем заявить, что первым сказал d3onic), чтобы масштабировать geo.path() так, чтобы размеры моего широты / долготы масштабировались на ширину и высоту моего SVG?

(небольшой отказ от ответственности: извинения, если я пропустил что-то очевидное, это для проекта, который я пытаюсь завершить в крайних случаях)

1 Ответ

8 голосов
/ 09 марта 2012

Сначала вы захотите создать проекцию и назначить ее для d3.geo.path, чтобы можно было настроить параметры проекции. 

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

По умолчанию используется проекция d3.geo.albersUsa, которая на самом деле представляет собой составную проекцию (с четырьмя различными прерывистыми областями), предназначенную для отображения 48 штатов: Аляска, Гавайи и Пуэрто-Рико. Ах, этноцентризм. ;)

Используйте пример albers в репозитории git для интерактивного определения правильных настроек проекции. Настройки, которые вам нужно установить:

  • начало координат должно быть широтой и долготой Нью-Йорка (возможно, 73,98 °, 40,71 °)
  • перевод должен быть центром вашей области отображения (поэтому, если вы рисуете что-то 960 × 500, вы можете использовать значение по умолчанию 480 250; это будет местоположение в пикселях исходного положения)
  • шкала - это некое число, указывающее, сколько нужно увеличить; так как вы рисуете карту масштаба города, вам, вероятно, понадобится значение, более похожее на 10000

Наконец, вам нужно выбрать несколько параллелей. Вы можете использовать значения по умолчанию, предоставляемые d3.geo.albers (), но для Нью-Йорка могут быть более подходящие. Возможно, сверьтесь с USGS, потому что они часто публикуют стандартные параллели для разных областей карты.

...