Gis d3.js投影(albersUsa)映射不正确
我正在使用以下代码映射地图上的点:Gis d3.js投影(albersUsa)映射不正确,gis,data-visualization,d3.js,Gis,Data Visualization,D3.js,我正在使用以下代码映射地图上的点: var width = 960, height = 500, centered, data; var svg = d3.select("#chart").append("svg").attr("width", width).attr("height", height); var projection = d3.geo.albersUsa().scale(width).translate([width / 2, height / 2]); var path
var width = 960, height = 500, centered, data;
var svg = d3.select("#chart").append("svg").attr("width", width).attr("height", height);
var projection = d3.geo.albersUsa().scale(width).translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
var states = svg.append("g")
.append("g")
.attr("id", "states")
d3.json("usstates.min.geojson", function(json) {
states.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path);
});
var points = svg.append("g")
.attr("id", "points");
// Bentonville, Arkansas is at 36.3728, 94.2086
bvCoords = projection([36.3724, 94.2216]);
console.log(bvCoords)
points.append("svg:circle")
.attr("cx", bvCoords[0]).attr("r", 100).attr("cy", bvCoords[1])
.style("fill", "#F00");
当我在Chrome中加载它时,控制台报告[114.03316181053958,-15.872634684617708]
,它将位于加拿大西海岸的某个地方。如果我将.attr(“transform”、“translate”(+width/2+)、“+height/2+”)
添加到点。append
调用,它在印第安纳州南部的某个地方
这个投影有什么不对吗?你的坐标是错误的:D3使用了更“数学”的传统排序方式
[经度,纬度]↦ [x,y]
地理坐标通常表示为纬度、经度(例如,阿肯色州本顿维尔的北纬36°22′0〃,西经94°12′48〃),即
[-94.2216,36.3724]
:也请注意负经度,因为它位于0°以西。谢谢。我觉得两个都呈阳性有点疯狂,但这就解决了问题!