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矩形環繞錯誤

回答

相關問題