Проекция броненосца в D3

Я пытаюсь использовать проекцию Armadillo в d3 (используя плагин проекции d3), но у моей карты проблемы с рендерингом. Отображение точно такое же, как в следующем проекте bl.ocks: http://bl.ocks.org/mortenjohs/4739921 (выберите Armadillo в меню). Я также использовал world-110m.json.

Проекция броненосца в d3

Есть странные линии к югу от земного шара. Я заметил, что у карты Джейсона Дэвиса нет таких проблем с рендерингом: https://www.jasondavies.com/maps/armadillo/

Как мы можем использовать проекцию Armadillo без этих проблем? В чем разница между картой Мортенджо и Джейсона Дэви? Спасибо за помощь!

Код, используемый для отображения, такой же, как и для других проекций, а именно:

var projection = d3.geoArmadillo();

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

d3.json("/d/4090846/world-110m.json", function(error, world) {
  svg.insert("path", ".graticule")
      .datum(topojson.object(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; }))
      .attr("class", "boundary")
      .attr("d", path);

d3.js map-projections
person Philippe V.    schedule 02.10.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы должны использовать сферический фон в качестве «обтравочного контура» для ваших слоев.

Прежде чем добавить свой слой, попробуйте что-то вроде:

    defs = svg.append("defs");

    defs.append("path")
        .datum({type: "Sphere"})
        .attr("id", "sphere")
        .attr("d", path);

    defs.append("clipPath")
        .attr("id", "clip")
      .append("use")
        .attr("xlink:href", "#sphere");

Затем добавьте свои слои, как обычно, но с дополнительным атрибутом:

        .attr("clip-path", "url(#clip)");

Проекции, требующие обрезки (в основном прерванные и Armadillo), упоминаются в документе d3-geo- проекция.

Если после этого вы изменяете DOM в элементе svg, просто позаботьтесь о том, чтобы defs оставался первым дочерним элементом.

person mgc    schedule 02.10.2016
comment
Большое спасибо, это имеет большой смысл! - person Philippe V.; 02.10.2016
comment
Рад, что это помогло! - person mgc; 03.10.2016