Рисование государственных границ с помощью d3 не работает должным образом

Question

Вот пример моей проблемы. В конечном итоге это будет иметь информацию о графстве / почтовом индексе.

Я создаю проекцию и географический путь:

var projection = d3.geo.albersUsa()
  .scale(width * 1.3)
  .translate([width / 2, height / 2]);

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

Однако, когда я пытаюсь добавить государственные границы ... этопроисходит:

#state-borders {
    fill: none;
    stroke: #333;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}


svg.append('path')
  .datum(topojson.mesh(states, states.objects.states, function(a, b) { return a !== b; }))
.attr('id', 'state-borders')
.attr('d', path);

Я смотрел на другие примеры, и все они, кажется, делают что-то похожее, я не могу понять, чтоЯ делаю не такЭто почти как инсульт, livejoin вообще не работает.

Answer 1

Ваши географические данные уже спроектированы;это не должно быть спроецировано снова. Проекция берет непроецированные точки на трехмерном глобусе и проецирует их на 2-мерное пространство, делая это на данных, которые уже 2-мерные, не будут работать.

Ваши данные не состоят из трехмерных точек (с координатным пространством, измеренным в градусах), а скорее имеют 2d точки (с координатным пространством, измеренным в пикселях). Таким образом, мы можем просто использовать преобразование идентичности, так как нет необходимости изменять / проектировать / преобразовывать координаты. В d3v4 + мы могли бы использовать:

var path = d3.geoPath(); // default projection is an identity

Но с d3v3 проекцией гео-пути по умолчанию является AlbersUsa. Таким образом, мы должны явно указать, что нам не нужна проекция:

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

Это дает нам рабочий fiddle .

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

Теперь у нас могут возникнуть новые проблемы, работа с предварительно спроецированной геометрией может затруднить изменение размеров, особенно в d3v3 - этот файл предназначен для области просмотра 960x600. Чтобы автоматически масштабировать и центрировать карту на основе ее особенностей, см. Этот вопрос , некоторые ответы предназначены для v3 из d3 ( a , b ). Но это становится намного проще с помощью метода fitSize, который вы можете использовать в d3v4 +, как описано в этом ответе . А для дальнейшего обсуждения работы с заранее спроектированной геометрией есть этот вопрос . Если вы намереваетесь накладывать объекты поверх предварительно спроецированной геометрии, вам, вероятно, лучше всего найти не спроецированный американский топо / геоджон, чтобы упростить вещи, как обсуждалось здесь .