D3 не отображает данные карты в файле JSON - PullRequest
Новая
       16

D3 не отображает данные карты в файле JSON

1 голос
/ 07 марта 2019

Я работаю с библиотеками D3 JS для отображения карт. Загрузка карты штатов США работает нормально, но если я пытаюсь загрузить карты округов для отдельных штатов, она не работает должным образом. Файл, который я использую для всех состояний, находится по адресу https://raw.githubusercontent.com/d3/d3.github.com/master/us-10m.v1.json. Карта состояний, которую я сейчас использую, - https://raw.githubusercontent.com/deldersveld/topojson/master/countries/us-states/MI-26-michigan-counties.json,, хотя другие состояния имеют такое же поведение.

Используя инструменты разработчика Chrome, я заметил, что состояния (работающие) отображаются с одним элементом «path» с одним элементом «d» под ним для всей карты: 

<path d="M558.8236946374037,348.30360060633L559.3534721355569,348.2802219377176L567.3201262115587,347.9178525742255L571.2684679430778,347.7775805625511L572.0381446856777,347.7542018939387L577.0160540079474…

Округа отображают один элемент "g" с несколькими элементами "path": 

<g class="counties"><path d="M-86.2371554117112,44.517643343110294L-85.81834245759008,44.51265840274941L-85.82187674412275,44.16371257748768L-86.04276965241448,44.16620504766812L-86.38912973261591,44.178667398570326L-86.35201972402291,44.22851680217914L-86.26896399050521,44.344416665569646L-86.25305970110821,44.40049724462957L-86.24952541457554,44.48274876058412Z"></path><path d="M-84.13072063824123,42.42521462663013L-83.66596195919543,42.43144580208123L-83.55286479015007…

Код D3, который я использую для их рендеринга, одинаков, просто указывает на разные источники данных. Это указывает на (рабочий) код состояния: 

d3.json("us-10m.v1.json", function (error, us) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("d", path).append("svg:title");

Сами файлы выглядят одинаково отформатированными с (конечно же) разными данными, поэтому я не понимаю, почему существуют большие различия в способе генерации кода SVG. Я вижу два отличия в том, что в файле состояний США есть элемент "bbox", которого нет в файлах состояний, а в файле Мичигана есть элементы "свойств" внутри коллекции геометрий.

1 Ответ

2 голосов
/ 07 марта 2019

Ваша проблема противоположна этому one .Американский топойсон уже спроецирован (на область 960x600 пикселей) - базовые координаты в топойсоне представляют координаты пикселей.Карты, которые используют предварительно спроектированные географические объекты, не используют географические проекции d3.При рисовании с использованием генератора пути это выглядит следующим образом: 

 var path = d3.geoPath(); // or
 var path = d3.geoPath().projection(null);

Однако данные Мичигана содержат пары широта / долгота.Если мы конвертируем ваш Мичиганский топойсон в геоджон (чтобы у нас были читаемые человеком координаты), мы получаем такие значения, как: [-87.86292721673836,45.35386708864823].Если мы используем нулевую проекцию и будем рассматривать их как значения пикселей, объекты будут слева от видимого SVG, поскольку значения x отрицательны.Поэтому нам нужен прогноз для нашего пути: 

var path = d3.geoPath().projection(someProjection);

Я не уверен, какой прогноз вам нужен - предварительно спроектированные данные США используют проекцию Альберса, поэтому, если мы хотим повторить эту и масштаб и центр Мичигана, мы могли бы использовать: 

var projection = d3.geoAlbers()
   .fitSize([width,height],geojsonObject);   // width/height of SVG/canvas
var path = d3.geoPath().projection(projection);

С Альберсом это приспособлено для США, если использовать fitSize или fitExtent в других частях мира, результаты могут некак и ожидалось, поворот проекции должен быть установлен для учета различных местоположений.

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

...