我正在研究 this我在裁剪出现在地球上的红色圆圈元素时遇到了麻烦,甚至超过了 90˚ 裁剪 Angular 。另外,有没有一种方法可以将投影应用于红色圆圈,这样看起来它们相对于正交 Angular 就在地球表面上?目前它们只是相对于屏幕显示为二维圆圈。
最佳答案
而不是使用 <circle>
元素,您可以使用 GeoJSON 点几何:
{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);
关于javascript - 带 D3 正交的圆形剪辑和投影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15778856/