Javascript D3 geo:让projection.clipAngle在所有指定元素上工作

我是D3的新手，我正在尝试制作一个带有点（“针”）的世界球。此处演示：

通常，投影定义为：

var proj = d3.geo.orthographic()
  .center([0, 0])
  .rotate([50, -20, 0])
  .scale(250)
  .clipAngle(90)
  .translate([(width / 2), (height / 2)]);

clipAngle

适用于svg路径，但不适用于引脚（即svg圆）。正如您在演示中看到的，位于冰岛和格陵兰岛之间的大头针应该隐藏起来（它是台湾）

所以我想问题来自这些方面，但我不明白为什么：

.attr("transform", function(d) {
  return "translate(" + proj([ d.lng, d.lat ]) + ")";
});

---

仅通过

clipAngle（）

设置剪裁半径来获得所需的行为是不够的。仅投影不会进行剪裁，而只计算投影坐标，而不考虑任何剪裁。这就是为什么台湾被渲染的原因，尽管你认为它是隐藏的

但是，多亏了D3，救赎就要来临了。你只需要重新思考你插入代表位置的圆圈的方式。D3拥有强大的概念，它将负责所需的大部分工作。当输入设置了剪裁角度的投影时，路径生成器将在计算要实际渲染的特征时考虑这一点。事实上，您已经设置了一个合适的路径生成器作为变量

path

。您甚至正确地将其应用于地球仪、陆地和圆弧

路径生成器将对GeoJSON数据进行操作，因此您只需将

位置

转换为Point类型的有效GeoJSON功能。这可以通过一个类似于圆弧的辅助函数来实现：

function geoPlaces(places) {
  return places.map(function(d) {
    return {
      type: "Point",
      coordinates: [d.lng, d.lat]
    };
  });
} 

只需稍作更改，即可绑定这些GeoJSON数据对象，使其可供路径生成器使用，而路径生成器则负责剪裁：

svg.selectAll(".pin") // Places
    .data(geoPlaces(places))
  .enter().append("path")
    .attr("class", "pin")
    .attr("d", path);

---

请看一看您的示例，以便进行演示。

您的答案是清晰的模型。