javascript - 为什么这 9 个美国城市在我使用经/纬度和 Albers USA 投影绘制它们时与它们在 D3 map 上的实际位置不对应？

Question

我正在尝试设置一个看似基本的美国 D3 map ，其中 9 个人口最多的城市用圆圈标记，但遇到了一个非常明显但令人困惑的问题。

我使用的是 Albers USA projection，U.S.声明 GeoJSON 文件，以及一个包含以下内容的 .csv:

1. 城市名称
2. 2014 年估计人口
3. 纬度
4. 经度

我使用 Google Fusion 表的地理编码功能计算了经度/纬度值，它们与 Scott Murray's D3 book github page 上可用的值相匹配.

当我尝试在每个城市应该所在的位置绘制一个圆圈时，几乎每个城市都不合适。在我试图绘制的 9 个城市中——纽约市、费城、芝加哥、休斯顿、达拉斯、圣安东尼奥、凤凰城、圣地亚哥、洛杉矶——只有纽约市和费城相对完整。芝加哥转移到明尼阿波利斯。圣地亚哥和洛杉矶一团糟。得克萨斯州和亚利桑那州的城市已经从他们所在的州完全消失。

这是 d3.csv 代码:

        d3.csv("city_pop.csv", function(data){
                console.log(data);
            var rScale = d3.scale.linear()
                            .domain([0, d3.max(data, function(d){
                                return parseFloat(d.estimate_2014);
                            })])
                            .range([1,15]);

            dataset = data;

            svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr({
                "cx": function(d) { return projection([d.lon, d.lat])[0];},
                "cy": function(d) { return projection([d.lon, d.lat])[1];},
                "r": function (d) { return rScale(parseFloat(d.estimate_2014));}
            })
            .style({
                "fill": "red",
                "opacity": 0.8
            });
        }); 

这是要点:http://bl.ocks.org/iblind/2e90a6f516fee793380e

我整天都在玩这个。有人有什么想法吗？我一直在用头撞墙寻找永远的感觉，并且完全迷失了方向。

tl;dr: why do the cities in this D3 map http://bl.ocks.org/iblind/2e90a6f516fee793380e not show up where they should be showing up?

Answer 1

基础数据错误(city_pop.csv)。通过谷歌地图运行你的纬度和经度，你会看到相同的模式形式。例如宾夕法尼亚州费城 (37.15477,-94.486114) 不是宾夕法尼亚州所在的位置 - https://goo.gl/maps/1G754