Неправильное заполнение проекции D3 world-50m.json

1

У меня есть проекция файла world-50m.json, однако, когда я заполняю его цветом, есть несколько стран, которые обрезаны по краям, которые создают горизонтальные секции заливки/линии по всей карте.

Это действительно видно на примере примера d3-geo: https://github.com/d3/d3-geo/blob/master/test/data/world-50m.json

Изображение 174551

Есть ли другой файл 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");
};

Любая помощь будет принята с благодарностью!

  • 0
    Возможно ли также включить ваш path и projection в ваш блок кода?
  • 0
    Ваши вопросы привели меня к ответу! Я использовал неправильную проекцию пути. Должен был использовать geoPath() вместо geo.path() пожалуйста, ответьте на вопрос, чтобы я мог пометить его правильно :)
Показать ещё 2 комментария
Теги:
d3.js
map-projections

1 ответ

0
Лучший ответ

Это решение подробно описано в комментариях выше и было достигнуто с помощью @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");
};
  • 0
    Я все еще немного смущен. d3.geo.path() должен был дать вам ошибку типа, верно? Что-то вроде Не могу прочитать свойство 'путь' из неопределенного . С другой стороны, вы заявили, что это работает. Вы можете рассказать мне об этом?
  • 0
    Извините за поздний ответ, я не получил ошибку типа, которая, по моему мнению, была связана с тем, что у меня были инициализированы d3 v3 и d3 v4 одновременно. Это означало, что вызовы path и projection направлялись к соответствующим версиям d3, но не работали вместе. Я упустил свои собственные переменные d3 из этого вопроса, чтобы упростить проблему, но теперь я понимаю, что включение большего контекста в мой вопрос помогло бы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню