使用topojson和D3映射數據

所以這裏是我第一次使用D3的庫來創建美國縣的地圖。使用topojson和D3映射數據

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://unpkg.com/[email protected]"></script> 

<svg width="960" height="600"></svg> 

<script> 

    'use strict'; 

    let path = d3.geoPath(); 

    let svg = d3.select("svg"); 

    d3.queue() 
     .defer(d3.json, "https://d3js.org/us-10m.v1.json") 
     .await(ready) 


    function ready(error, us) { 

     if (error) throw error; 

     svg.append("g") 
     .attr("class", "counties") 
     .selectAll("path") 
     .data(topojson.feature(us, us.objects.counties).features) 
     .enter().append("path") 
     .attr("d", path) 

    }

簡單而直截了當。有用。但是，當我將src更改爲更好的json，並在每個縣對象的道具中使用名稱時：

d3.queue() 
.defer(d3.json, "https://gist.githubusercontent.com/NealTaylor715/a08cc300e661aa45c464fa1e553b6f33/raw/eaa03db6827f2d6435b3898cae6fba03d6f55956/USCounties.json") 
.await(ready);

地圖中斷。我得到一個空白的SVG與這個小灰色污點。奇怪的是數據附加到路徑上，而不是我認爲它應該的方式。任何指針？我的新JSON格式不正確。對象的屬性屬性的名稱是我拍攝的功能的必要條件。任何幫助將不勝感激。先謝謝你。

來源

2017-04-18 Neal Taylor

這兩個數據源的格式都是正確的，但它們在一個方面有所不同，一個是預測而另一個不是。

您的第一個代碼塊中的數據集已經投影出來，也就是說它已經從三維橢球體上的點轉換爲笛卡爾平面上的點。我們可以告訴他們不是經緯度座標，當轉換爲常規geojson時，顯示點如...[649.7055250753067,200.18804561250514]...

第二個代碼塊中的數據集未投影（或用WGS84或其他數據「投影」）。它由表示南北/東/西/度的點組成。這topojson轉換爲普通GeoJSON的，我們看到這樣的座標：...[-167.36922883183183,53.30289293393393]...

與已預測數據，並沒有地理座標（API documentation，example），你只需服用座標的數據集，將它們轉換爲SVG協調，沒有變換空間。

對於未投影的數據，您需要使用投影（例如d3.geoAlbers）來正確縮放和變換您的lat long對（橢球上的點）到平面上的x，y點。

來源

2017-04-18 20:25:29

使用topojson和D3映射數據

回答

相關問題