Question

我使用naturalearth的geojson 110m / admin0地图与mercator作为投影。在单页应用中。

地图在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上:(

非常感谢。

Answer 1

我不确定它为什么会起作用，但如果我首先将投影置于除[0,0]之外的任何位置，那么它就会呈现正常。

带有naturalearth地图数据的d3.geo在谷歌浏览器上看起来很怪异

1 个答案: