为什么这9个美国城市在D3地图上没有对应它们的实际位置,而我用Albers美国投影来绘制它们

Why do these 9 U.S. cities not correspond to their actual locations on a D3 map when I plot them using long/lat with an Albers USA projection?

本文关键字:美国 位置 绘制 投影 Albers 地图 D3 城市 为什么 9个      更新时间:2023-09-26

我试图建立一个基本的美国D3地图,用圆圈标出9个人口最多的城市,但我遇到了一个非常明显但又令人困惑的问题。

我使用的是Albers USA投影U.S.状态GeoJSON文件.csv,其中包括:

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

我使用Google Fusion表格的地理编码功能计算了长/晚值,它们与Scott Murray的D3书github页面上的值相匹配。

当我试图在每个城市应该在的地方画一个圆圈时,几乎每个城市都不在位置上。在我试图绘制的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:为什么这张D3地图上的城市http://bl.ocks.org/iblind/2e90a6f516fee793380e不出现在他们应该出现吗?

基础数据错误(city_pop.csv)。在谷歌地图上运行你的经纬度,你会看到相同的模式形式。例如Philadelphia,Pennsylvania(37.15477,-94.486114)不在Pennsylvania所在的位置- https://goo.gl/maps/1G754