d3.js矩形特征在Mollweide投影中绘制为圆弧 [英] d3.js rectangle feature plotted as arc in Mollweide projection
问题描述
我正在尝试使用Mollweide投影下的d3.js绘制矩形.但是，当我运行以下脚本时，矩形显示为弧形或弯曲矩形.我发现这种行为有些奇怪，因为Mollweide投影中的平行线只是直线.有人可以解释一下效果吗?同样的效果在其他纬度和其他投影(甚至是等角投影)中也同样存在.
I am trying to plot a rectangle using d3.js under the Mollweide projection. However, when I run the following script the rectangle appears as an arc or curved rectangle. I find the bahaviour somewhat strange since the parallels in Mollweide projection are just straight lines. Could someone explain the effect? The same effect persists in other latitudes and other projections (even the Equirectangular one) as well.
<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var mainSVG = d3.select('body').append('svg').attr('width', 500).attr('height', 500);
var projection = d3.geoMollweide().scale(400).translate([250,750])
var path = d3.geoPath().projection(projection);
d3.json('test.json', function(error, vData) {
var features = vData.features;
mainSVG.selectAll('path')
.data(features)
.enter().append('path')
.attr('d', path)
.style('fill', 'red')
.style('stroke', 'black');
})
</script>
geojson文件:
the geojson file:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "DN": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 7.6, 65.0 ], [ 60.4, 65.0 ], [ 60.4, 63.4 ], [ 7.6, 63.4 ], [ 7.6, 65.0 ] ] ] } }
]
}
和生成的数字:
当我尝试在不同的纬度上绘制几个相邻的矩形时，结果更加奇怪:
推荐答案
D3路径遵循大弧，即两点之间的最短距离.这两个点在椭球体上的三维空间中，因此它们之间的最短路径可能不对应于在投影二维空间中测得的它们之间的最短路径.
D3 paths follow great arcs, the shortest distance between two points. These two points are in three dimensional space on an ellipsoid, so the shortest path between them may not correspond to the shortest path between them measured in a projected 2 dimensional space.
举一个极端的例子，假设一个点在85°N，90°W，另一个在85°N，90°E.尽管在同一平行线上，但两者之间的最短距离是在北极上的短距离干扰.D3会将这条线绘制为地图顶部的两条垂直线(在定型等角线地图上:赤道在中部，顶部在北)，而不是沿着第85条平行线的水平线.
Taking an extreme example, imagine a point at 85°N, 90°W, another at 85° N, 90 °E. Despite being on the same parallel, the shortest distance between the two is a short jaunt over the north pole. D3 would draw this line as two vertical lines to the top of the map (on a stereotypical equirectangular map: equator in the middle, north at the top) rather than a horizontal line along the 85th parallel.
如果希望在投影平面上的两个点之间具有明显的直线，请将顶点投影到投影平面上(svg坐标空间)，并绘制一条连接这些投影点的线.这可以通过创建一个新的geojson来完成，在其中投影了原始geojson的每对经纬度( projection([x，y]))，然后使用空投影进行绘制:.attr(d，d3.geoPath(null))
If you wish to have visibly straight lines between two points on a projected plane, project the vertices onto the projected plane (svg coordinate space), and draw a line connecting these projected points. This could be done by creating a new geojson where every lat,long pair of the original geojson has been projected (projection([x,y])) and then drawn with a null projection: .attr(d, d3.geoPath(null))
这篇关于d3.js矩形特征在Mollweide投影中绘制为圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
