d3.geo.path矩形环绕错误

这个简单的geojson矩形显示与一些geojson查看器正确，我得到一个矩形如预期。但是当我用d3来做时，这个矩形似乎环绕着。d3.geo.path矩形环绕错误

var polygonData = { 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "Polygon", 
 
     "coordinates": [ 
 
      [ 
 
      [ -100, -20 ], 
 
      [ -100, 20 ], 
 
      [ 100, 20 ], 
 
      [ 100, -20 ], 
 
      [ -100, -20 ] 
 
      ] 
 
     ] 
 
     }, 
 
     "properties": {} 
 
    }; 
 
    
 
    var width = 1000; 
 
    var height = 500; 
 
    
 
    var projection = d3.geo.equirectangular() 
 
     .scale(100) 
 
     .translate([width/2, height/2]) 
 
     .rotate([0, 0]) 
 
\t .center([0, 0]) 
 
     .precision(0); 
 
    
 
    var path = d3.geo.path() 
 
\t \t .projection(projection); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr({ 
 
     width: width, 
 
     \t height: height 
 
     }); 
 

 
    svg.append('path') 
 
     .datum(polygonData) 
 
     .attr({ 
 
     d: path, 
 
     fill: 'orange', 
 
     opacity: 0.5 
 
     });

<!DOCTYPE html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
 
    <style> 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
</body>

下面是我得到一个geojson viewer：

但这里是我得到上述d3 code：

颠倒缠绕顺序只是填充相反的形状，它不能解决问题。我猜它是一个反经络切割问题。一种解决方法是添加一些中间点以强制路径不环绕，但我需要能够使用更复杂的路径自动化此解决方案。

任何想法如何与d3一起使用此geojson并强制它像其他geojson查看器一样显示它，如同在地图上的一个简单矩形一样？

来源

2015-11-04 Biovisualize

从他切换到默认子午线切割，以小圆圈剪裁似乎做的伎俩：projection.clipAngle（181）http://stackoverflow.com/a/30996241/537080我想知道更好的解决方案是使用投影流吗？ – Biovisualize

我不觉得D3有什么可责备的;在我的理解中是那些错误的其他GeoJSON观众。作为一个人类生活在一个或多或少平坦的表面上，人们很容易被欺骗，认为一个像你的那样精心挑选了四个角的多边形应该看起来像一个矩形。在足够小的尺度上，并且给出合适的投影，这甚至适用于球形几何形状。但是，由于你的观点几乎是全球的一半，情况并非如此。

为了阐明这一些光，我使用的正投影到与多边形沿着显示一些地理特征：

从这个视图很明显，沿着子午线的线是第一边缘连接点[-100,-20]和[-100,20]。从那时起，墨西哥西北部的一个地方是[-100,20]，即great arc，即最短的连接点，到达全球中途的下一个点[100,20]。这条道路同样在南半球封闭。因此，多边形的轮廓是地球表面上以给定顺序连接其所有点的最短路径。

尽管您的多边形是由其坐标确定的，但其外观将取决于使用的投影。下面是一个使用墨卡托投影相同的多边形的另一种观点认为：

来源

2015-11-04 23:29:45 altocumulus

感谢您的好解释。我同意我得到的形状是加入点并填充形状的合理方法。但是我需要的表示仍然应该看起来像是等矩形投影中的矩形。了解d3默认会加入最短路径之后的点，让我找到一种方法来强制它走更长的路。使用projection.clipAngle似乎工作。 – Biovisualize

@Biovisualize * Ab *使用'projection.clipAngle（）'感觉就像是在欺骗我。我认为这是一条危险的道路，因为它显示了它所依赖的所需输出：1）通过将其设置为大于180度来关闭剪辑;以及2）通过设置“.precision（0）”关闭自适应重采样。除了这些设置的副作用之外，如果这些先决条件中的任何一个发生更改，您的可视化将会中断。 – altocumulus

我完全同意，但是在等矩形位置的这个位置上获得矩形的解决方案是什么？也许根本不使用d3.geo.path？ – Biovisualize

d3.geo.path矩形环绕错误

回答

相关问题