Задача
Все ваши объекты прорисованы, вы правильно используете свой путь и вводите цикл.Чтобы увидеть, установите для своей заливки значение none:
Вы можете увидеть их при проверке svg: все пути есть.
Почему вы не видите их на карте, когда они заполнены?Поскольку полигоны перевернуты, они охватывают весь мир, за исключением области интереса.В то время как большинство других географических библиотек / средств визуализации воспринимают геойсон как декартову, D3 - нет.Это означает, что порядок намотки имеет значение.Ваши координаты намотаны в неправильном порядке.
Решение
Чтобы правильно заполнить, нарисовать все объекты и поддерживать взаимодействие с мышью, необходимо изменить порядок намотки полигонов.Вы можете сделать это на лету или создать новые файлы geojson для хранения предварительно обращенных данных.
Для этого давайте взглянем на ваши данные.Вы работаете только с мультиполигонами, давайте рассмотрим структуру:
{
type:"Feature",
properties: {...},
geometry: {
type: "MultiPolygon",
coordinate: /* coordinates here */
}
}
Координаты структурированы следующим образом:
coordinates:[polygons] // an array of polygons
Отдельные полигоны структурированы следующим образом:
[outer ring][inner ring][inner ring]... // an array of coordinates for an outer ring, an array of coordinates for each hole (inner ring).
Полигональные кольца структурированы в виде массива длинных лат, причем первое и последнее значения одинаковы.
[x,y],[x,y]....
Итак, чтобы изменить порядок координат, нам нужнопоменять местами элементы в кольцевых массивах:
features.forEach(function(feature) {
if(feature.geometry.type == "MultiPolygon") {
feature.geometry.coordinates.forEach(function(polygon) {
polygon.forEach(function(ring) {
ring.reverse();
})
})
}
})
Если бы в миксе тоже были полигоны (они немного меньше вложены), мы могли бы использовать:
features.forEach(function(feature) {
if(feature.geometry.type == "MultiPolygon") {
feature.geometry.coordinates.forEach(function(polygon) {
polygon.forEach(function(ring) {
ring.reverse();
})
})
}
else if (feature.geometry.type == "Polygon") {
feature.geometry.coordinates.forEach(function(ring) {
ring.reverse();
})
}
})
Вот обновленный plunker