d3.js - D3 中的 Armadillo 投影

Question

我正在尝试在 d3 中使用 Armadillo 投影(使用 d3 投影插件)，但我的 map 存在渲染问题。显示与以下 bl.ocks 项目中的显示完全相同:http://bl.ocks.org/mortenjohs/4739921 (在菜单中选择 Armadillo )。我还使用了 world-110m.json。

地球南部有一些奇怪的线路。我注意到 Jason Davies 的 map 没有这样的渲染问题:https://www.jasondavies.com/maps/armadillo/

我们如何使用 Armadillo 投影而不出现这些问题？ mortenjohs map 和 Jason Davie 的 map 有什么区别？谢谢您的帮助!

用于显示的代码与其他投影相同，即:

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);

Answer 1

您必须使用球体背景作为图层的“剪切路径”。

在添加图层之前，请尝试以下操作:

    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)");

d3-geo-projection 的文档中提到了需要裁剪的投影(主要是中断的投影和 Armadillo ) .

如果您之后要修改 svg 元素中的 DOM，请注意 defs 保留在第一个子元素中。