d3.js投影（albersUsa）映射錯誤

Question

我使用以下代碼在地圖上映射點：

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]，這將是位於Western某處加拿大海岸。如果我將.attr("transform", "translate(" + width/2 + "," + height/2 + ")")添加到points.append電話，它在印第安納州南部的某個地方。

我在做什麼這個預測錯了？

Answer 1

你的座標是錯誤的：D3使用[longitude, latitude] ↦ [x, y]的「數學」常規排序。

地理座標通常以緯度，經度給出（例如，阿肯色州本頓維爾的36°22'0「N，94°12'48」W），這將是[-94.2216, 36.3724]：還要注意負經度，因爲它是0°。