Javascript 具有D3正交的圆剪辑和投影

我正在工作，我在剪辑地球仪上出现的红色圆圈元素时遇到了困难，甚至超过了90度的剪辑角度。还有，有没有一种方法可以将投影应用到红色圆上，例如，相对于正交角度，它们看起来像是在地球表面上？此时，它们仅显示为相对于屏幕的二维圆。

您可以使用GeoJSON点几何图形，而不是使用

元素：

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

然后可以通过D3的投影系统来剪裁，具体取决于您设置的剪贴画。所以你可能会有这样的想法：

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

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

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

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

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

你问题的第二部分询问这些圆是否是真正的地理圆。可以生成地理圆圈要素（同样，作为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);

---

感谢您抽出时间提供答案，我非常感谢。你的密码正是我想要的。同时，感谢您对D3本身的所有精彩贡献@Jason有没有办法转换d3.geo.circle的角度/半径？origin呢？您对如何最好地处理大型数据集有什么建议吗？我已经实现了一些类似于您上一个建议的东西，但是我发现在旋转地球仪上有相当大的2k+点的滞后（这太出乎意料了）。想知道是否有什么技巧可以让事情变得更顺利一点。