d3.geo與naturalearth地圖數據在谷歌瀏覽器上看起來很奇怪

我正在使用naturalearth的geojson 110m/admin0地圖與mercator作爲投影。在一個單頁面的應用程序。d3.geo與naturalearth地圖數據在谷歌瀏覽器上看起來很奇怪

該地圖在IE和Firefox上呈現良好，但在Chrome上出現混亂。國家邊界在可識別時看起來很好笑。最初的演繹總是一樣的。然而，在幾個div隱藏/顯示和映射重繪之後，它會自動糾正自身並開始看起來像熟悉的地球。並沒有回到有趣的樣子。

它適用於naturalearth的50m/admin0數據。

我在做什麼錯？這是Chrome的錯誤嗎？

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    #map-here svg { 
     border: blue thin dotted; 
    } 
    #map-here svg .adm-0 { 
     stroke: white; 
     stroke-width: 1px; 
     fill: #ababab; 
    } 
</style> 
<body> 
<div id="map-here"></div> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://underscorejs.org/underscore-min.js"></script> 
<script type="text/javascript"> 
var w = 900, h = 450; 
var projection = d3.geo.mercator() 
     .translate([w/2, h/1.6]) 
     .scale([111]); 
var svg = d3.select("#map-here") 
     .append("svg") 
     .attr("width", w) 
     .attr("height", h); 
// get data from https://www.google.com/fusiontables/DataSource?dsrcid=424202 
d3.csv("data/110m_admin_0_countries.csv", function (error, admin_0) { 
    var parsed_data = _.map(_.filter(admin_0, function (d) { 
     return d.featurecla === "Adm-0 country"; 
    }), function (d) { 
     delete d.svg_4326; 
     delete d.wiki_4326; 
     d.json_4326 = JSON.parse(d.json_4326); 
     return d; 
    }); 
    var path = d3.geo.path() // actually this is a path-generator function 
      .projection(projection); 
    var x = svg.selectAll("g") 
      .data(parsed_data) 
      .enter() 
      .append("g"); 
    x.append("path") 
      .classed("adm-0", true) 
      .attr("d", function (d) { 
       return path(d.json_4326); 
      }) 
});

我也試圖扭轉座標數組，但得到了同樣的結果。將欣賞一些有用的指針。

編輯---- 我已更新代碼以包含html和樣式。但是我無法找到地圖GeoJSON的純數據URL，無法把這個的jsfiddle :(

非常感謝。

來源

2014-03-28 Dinesh

您能否提供一個完整的工作示例來演示此問題？ –

@Lars我已經包含了整個代碼，因此很容易複製，但無法找到一個將地圖下載爲數據的位置 - 並且很難將整個數據放在jsfiddle上如果您可能會建議一個數據網址，那將是非常棒的！ – Dinesh

這是我在這之後的數據 - 您可以將完整的數據數據例如在https://vida.io/上 –

我不知道爲什麼它的工作原理，但如果我中心投影除了[0,0]之外的任何東西，那麼它會呈現OK。

來源

2014-04-02 11:21:03 Dinesh

d3.geo與naturalearth地圖數據在谷歌瀏覽器上看起來很奇怪

回答

相關問題