使用 D3 正交法进行圆形剪辑和投影

Question

我正在处理this，我在裁剪地球上出现的红色圆圈元素时遇到了问题，即使它们超过了 90˚ 裁剪角。此外，有没有一种方法可以将投影应用于红色圆圈，因为看起来它们相对于正交角度位于地球表面上？目前它们只是相对于屏幕显示为 2d 圆圈。

Answer 1

您可以使用 GeoJSON 点几何图形，而不是使用 <circle> 元素：

{type: "Point", coordinates: [λ, φ]}

然后可以通过 D3 的投影系统对这些进行剪辑，具体取决于您设置的 clipAngle。所以你可能会有类似的东西：

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

data.forEach(function(d) {
  svg.append("path")
      .datum({type: "Point", coordinates: [d.Lon, d.Lat]})
      .attr("d", path.pointRadius(d.Magnitude));
});

注意点的半径是如何通过每个点的路径设置的。您还可以将 pointRadius 设置为一个函数，因此您可以执行以下操作：

var path = d3.geo.path()
    .projection(…)
    .pointRadius(function(d) { return d.radius; });

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude};
    })
    .attr("class", "point")
    .attr("d", path);

您问题的第二部分询问这些圆圈是否可以是真正的地理圆圈。 d3.geo.circle 可以生成地理圈特征（同样是 GeoJSON），会被正确裁剪：

var path = d3.geo.path().projection(…),
    circle = d3.geo.circle();

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return circle
           .origin([d.Lon, d.Lat])
           .angle(d.Magnitude)();
    })
    .attr("class", "point")
    .attr("d", path);