为什么这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?
我试图建立一个基本的美国D3地图,用圆圈标出9个人口最多的城市,但我遇到了一个非常明显但又令人困惑的问题。
我使用的是Albers USA投影, U.S.状态GeoJSON文件和.csv,其中包括:
- 城市名称
- 2014年估计人口
- 纬度
- 经度
我使用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
相关文章:
- jquery试图按名称获取按钮位置
- 我可以获得相对于被点击元素的确切点击位置吗
- 谷歌地图固定位置覆盖
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 循环比赛位置算法
- es6 相当于下划线查找位置
- jQuery循环在特定位置暂停
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 自定义函数中的光标位置
- 安卓平台上的QWebView HTML5地理位置
- DIV并排,位置不正确
- 使用jQuery更改元素的顶部位置
- 在谷歌地图上绘制位置数据库
- 跟踪jqplot垂直折线图的鼠标位置
- 设置画布渲染器的x和y位置
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 根据页面的位置突出显示文本中的字符
- 传单缩放控制位置错误
- 基于地理位置的HTML(美国以外的人访问我的网站,看到不同的HTML代码)
- 为什么这9个美国城市在D3地图上没有对应它们的实际位置,而我用Albers美国投影来绘制它们