У меня есть проекция файла world-50m.json
, однако, когда я заполняю его цветом, есть несколько стран, которые обрезаны по краям, которые создают горизонтальные секции заливки/линии по всей карте.
Это действительно видно на примере примера d3-geo: https://github.com/d3/d3-geo/blob/master/test/data/world-50m.json
Есть ли другой файл JSON без этих стран отсечения? Или, может быть, я мог бы опустить конкретные полигоны из моего заполнения? Не совсем уверен, как я буду определять каждую страну/форму. В то время как большинство из них крошечные и не будут пропущены, если их опустят, одним из основных является Россия.
Вот мой код для справки:
var w = 960,
h = 660,
active = d3.select(null);
var projection = d3.geoMercator()
.scale(150)
.translate([w/2, h/2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var countries = svg.append("svg:g").attr("id", "countries");
d3.json("world-50m.json", function(error, us) {
mapFeatures = topojson.feature(us, us.objects.countries).features;
mapFeatures.type = "countries";
drawMap();
});
function drawMap() {
countries.selectAll("path")
.data(mapFeatures)
.enter().append("svg:path")
.attr("d", path)
.attr("class", "feature")
.attr("data-id", function(d) { return d.id; })
.style("fill", "blue")
.style("stroke", "white")
.style("stroke-width", ".2px");
};
Любая помощь будет принята с благодарностью!
Это решение подробно описано в комментариях выше и было достигнуто с помощью @Andrew Reid и @altocumulus.
Наблюдаемая проблема была примером Antimeridian Cutting, которая должным образом не обрабатывалась d3 из-за несоответствия путей и проекционных вызовов между синтаксисом d3 v3 и d3 v4.
Проблема была решена путем изменения geo.path()
в geoPath()
который скорректировал несоответствие и позволил d3 правильно отобразить карту с помощью антимедийной режущей поддержки.
Ниже приведен правильный код:
var w = 960,
h = 660,
active = d3.select(null);
var projection = d3.geoMercator()
.scale(150)
.translate([w/2, h/2])
.precision(.1);
var path = d3.geoPath()
.projection(projection);
var countries = svg.append("svg:g").attr("id", "countries");
d3.json("world-50m.json", function(error, us) {
mapFeatures = topojson.feature(us, us.objects.countries).features;
mapFeatures.type = "countries";
drawMap();
});
function drawMap() {
countries.selectAll("path")
.data(mapFeatures)
.enter().append("svg:path")
.attr("d", path)
.attr("class", "feature")
.attr("data-id", function(d) { return d.id; })
.style("fill", "blue")
.style("stroke", "white")
.style("stroke-width", ".2px");
};
d3.geo.path()
должен был дать вам ошибку типа, верно? Что-то вроде Не могу прочитать свойство 'путь' из неопределенного . С другой стороны, вы заявили, что это работает. Вы можете рассказать мне об этом?
path
иprojection
в ваш блок кода?geoPath()
вместоgeo.path()
пожалуйста, ответьте на вопрос, чтобы я мог пометить его правильно :)