Проблемы с созданием TopoJSON для использования с примером D3 Choropleth

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

Во-первых, загружаемые вами географические данные состоят из пар широта-долгота. Географические данные, используемые в примере, представляют собой предварительно спроецированные топозоны, размер которых соответствует декартовой плоскости 960x600. Вам также нужно будет предварительно спроектировать свои данные (аналогично картография из командной строки, часть 1), или спроецируйте свои данные на лету в своем блоке, используя geoPath и geoProjection. Майк использует геопроекцию в своем блоке, нулевую геопроекцию, геопроекцию по умолчанию для геоПути. Нулевая проекция просто берет координаты в json и использует их как координаты svg без преобразования.

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

Вторая потенциальная проблема для вас заключается в том, что ваши данные имеют другие атрибуты, чем в примере:

Я думал, что мой файл TopoJSON будет иметь такие атрибуты, как атрибут «id», который содержит коды FIPS для округов.

Атрибуты функции вашего топожсона:

"properties":{"AREA":0.140669542963654,
"PERIMETER":1.69104063251173,
"CO29_D00_":2,
"CO29_D00_I":1,
"STATE":"29",
"COUNTY":"045",
"NAME":"Clark",
"LSAD":"06",
"LSAD_TRANS":"County"}}

Получаются из шейп-файла:

Поскольку вы используете источник, отличный от Майка, атрибуты данных могут отличаться. Поскольку у источника нет идентификатора FIPS, вы не можете выполнить соединение между вашими негеографическими данными и вашими географическими объектами, как в примере. Однако есть не слишком сложное решение:

• Создайте код FIPS на основе имеющихся у вас данных.

Из NOAA (самое краткое определение, которое я нашел):

Первые две цифры относятся к штату, а последние три обозначают округ или эквивалент округа. Таким образом, у каждого штата есть свой собственный 2-значный номер, а у каждого округа в штате есть свой собственный 3-значный номер, которые объединяются в 5-значный номер для уникальной идентификации каждого округа США. (источник)

У вас есть число, представляющее штат и округ — можно с уверенностью сказать, что это ваш код округа FIPS в сочетании. Вы можете комбинировать их при создании своего гео/топойсона, вы можете создать новое свойство непосредственно перед рисованием функций геоджсона:

var features = topojson.feature(us, us.objects.counties).features;
features.forEach(function(d) {
   d.FIPS = "" + d.properties.STATE + d.properties.COUNTY;
})

или вы можете объединить строку и округ при заполнении функции:

.attr("fill", function(d) { return color(d.rate = unemployment.get(
""+d.properties.STATE+d.properties.COUNTY)); })

Вот как это может выглядеть.