[英]Circle clip and projection with D3 orthographic
我正在努力解决这个问题 ,我在修剪红色圆圈元素方面遇到了麻烦,因为它们出现在地球上甚至超过90˚的夹角。 此外,是否有一种方法可以将投影应用于红色圆圈,因为看起来它们相对于正交角度位于地球表面? 目前它们只是相对于屏幕显示为2d圈。
您可以使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.