使用 D3 正交的圆形剪辑和投影 [英] Circle clip and projection with D3 orthographic

问题描述

我正在处理这个，但在剪裁出现在地球仪甚至超过 90° 夹角.另外，有没有一种方法可以将投影应用于红色圆圈，就像它们相对于正交角度位于地球表面一样?目前，它们只是相对于屏幕显示为 2d 圆圈.

I'm working on this and I'm having trouble with clipping the red circle elements as they appear on the globe even past the 90˚ clip angle. Also, is there a way you can apply the projection to the red circles, as in so it looks like they're on the surface of the globe relative to the orthographic angle? At the moment they just appear as 2d circles relative to the screen.

推荐答案

你可以使用 GeoJSON 点几何代替 元素:

Instead of using <circle> elements, you can use GeoJSON point geometries:

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

然后可以通过 D3 的投影系统对这些进行剪辑，具体取决于您设置的剪辑角度.所以你可能有这样的事情:

These can then be clipped via D3’s projection system, depending on the clipAngle that you’ve set. So you might have something like:

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 设置为一个函数，因此您可以执行以下操作:

Note how the radius of the point is set via the path for each point. You can also set the pointRadius to be a function, so you could do something like:

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)，它将被正确剪辑:

The second part of your question asks whether the circles can be true geographic circles. d3.geo.circle can generate geographic circle features (again, as GeoJSON), which will be properly clipped:

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 正交的圆形剪辑和投影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！