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地图数据在谷歌浏览器上看起来很奇怪

回答

相关问题