D3 中的犰狳投影

Question

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

地球以南有奇怪的线。我注意到Jason Davies的地图没有这样的渲染问题：https://www.jasondavies.com/maps/armadillo/

我们如何在没有这些问题的情况下使用犰狳投影？ mortenjohs 地图和 Jason Davie 的地图有什么区别？谢谢你的帮助！

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

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 的文档中提到了需要剪辑的投影（主要是中断的和犰狳）。

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