圆剪辑和投影与D3正射影

Circle clip and projection with D3 orthographic

本文关键字：D3 投影      更新时间：2023-09-26

我正在处理这个问题，我在剪辑红色圆圈元素时遇到了麻烦，因为它们出现在球体上，即使超过90˚剪辑角。还有，有没有一种方法可以将投影应用到红色圆圈上，使它们看起来像相对于正射角在地球表面上?目前，它们只是以相对于屏幕的2d圆圈的形式出现。

代替使用<circle>元素，您可以使用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));
});

注意点的半径是如何通过每个点的路径设置的。您还可以将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);
相关文章：