d3.geo在google chrome上看起来很奇怪。
d3.geo在google chrome上看起来很奇怪。
提问于 2014-03-28 16:30:54
我使用自然地球的geojson 110m/admin0地图和墨卡托作为投影。在单页应用程序中。
地图在IE和Firefox上渲染得很好，但在Chrome上就变得混乱了。国家边界看起来很滑稽，当它们可辨认出来的时候。初始格式副本总是相同的。然而，在几次div隐藏/显示和地图重绘之后，它会自动进行自我更正，并开始看起来像熟悉的地球。再也不会回到滑稽的样子了。
它可以很好地处理naturalearth works的50m/admin0数据。
我做错了什么？是Chrome的bug吗？
<!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上:(
非常感谢。
回答 1
Stack Overflow用户
发布于 2014-04-02 19:21:03
我不确定它为什么工作，但如果我首先将投影居中到除0,0之外的任何位置，则它渲染正常。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22707650
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号