Карта не отображается, но данные верны - PullRequest
Новая
       36

Карта не отображается, но данные верны

2 голосов
/ 05 июля 2019

Я новичок, пытаюсь скопировать чужой код хороплета и использовать мои данные.

Мои данные соответствуют их структуре данных, и я могу получить правильные данные для console.log(), и мои подсказки отображают правильные данные.

Но моя карта - это просто большой цветной блок без контуров.

Вот кодекс , но этот код отображает элементы карты: 

var path = d3.geo.path();

svg.append("g")
    .attr("class", "county")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function (d) {
      return color(pairFipsWithId[d.id]);
    })

Результат выглядит следующим образом:

enter image description here

1 Ответ

1 голос
/ 05 июля 2019

⚠️ В этом вопросе и ответе оба значения d3v3 - d3v4 + географические пути немного различаются, см. Этот вопрос / ответ для d3v4 +.

Если вы делаетеChloopleth D3, вы должны искать последнюю версию D3 - d3v3 немного устарела сейчас.Однако, поскольку в v3 есть некоторые различия, это не совсем дубликат этого вопроса , но проблема та же:

  • В используемой вами карте-примере есть непроецированные географические данные
  • Ваши географические данные проецируются.

Другими словами, географические данные вашего примера используют трехмерную систему координат, измеренную в градусах широты и долготы, в то время как ваши географические данные используют систему координат.где единицами измерения являются пиксели.Но вы не указываете это изменение, и D3 не знает, как его исправить.

В D3v3 проекция по умолчанию для d3.geo.path() равна d3.geo.albersUsa(), все проекции D3 предполагают, что ваши данные записаны вшироты и долготы, в противном случае нам потребуется указать дополнительный параметр для проекций, чтобы указать, какое пространство координат использует входные данные.

Знак того, что ваши данные уже спроецированы, может появиться на mapshaper.org, если вы перетащитетопойсон в окно ваша карта перевернута.Зачем?Географические координаты увеличиваются при движении на север (обычно вверх), а пиксельные координаты увеличиваются при движении вниз.Это ваши данные на mapshaper.org:

1024 *enter image description here

Мы не можем "отменить проецирование" данных, поскольку мы не знаем, какая проекция использовалась для их создания,Но мы можем назначить нулевую проекцию для geo.path: 

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

Нулевая проекция просто берет каждую координату в данных и преобразует ее в пиксельную координату без преобразования - входные значения обрабатываются как значения пикселей,Поскольку эта карта была разработана для веб-карты, она не требует масштабирования или центрирования (в зависимости от размера SVG).

Вот обновленный codepen .

В d3v4 + проекция по умолчанию для geoPath является нулевой проекцией, она также поставляется с методами selection.raise () и selection.lower (), которые могут немного упростить ваш код, а также с лучшими параметрамидля подгонки любого набора данных к SVG / Canvas заданного размера.Вот d3v4 codePen с несколькими модификациями, d3v5 требует немного больше в обновлении d3.json

...