犰狳在D3投影

Question

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

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

如果没有这些问题，我们如何使用犰狳投影？ mortenjohs地图和杰森戴维的地图有什么区别？谢谢你的帮助！

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

while(counter < (fib.length - 2)){
  n1 = fib[counter];
  System.out.println("1 counter: " + counter + "/" + fib[counter]);
  n2 = fib[counter+1];
  System.out.println("2 counter: " + counter + "/" + fib[counter+1]);
  fibSum = n1 + n2;
  fib[counter+2] = fibSum;
  System.out.println("3 counter: " + counter + "/" + fib[counter+2]);
  counter++;
  }

Answer 1

您必须将球体背景用作＆＃34; 剪切路径＆＃34;对于你的图层。

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

    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留下第一个孩子。