圆夹和投影与D3正字 [英] Circle clip and projection with D3 orthographic

问题描述

我正在处理这，我在剪辑红圈元素时遇到问题，因为它们出现在地球甚至超过90˚夹角。另外，是否有一种方法可以将投影应用到红色圆圈，因为它看起来像是在地球表面相对于正交角？

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.

推荐答案

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

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

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

这些可以通过D3的投影系统裁剪，取决于clipAngle你已经设置。所以你可能有像：

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屋！