次のコードを使用して、マップ上のポイントをマッピングしています。
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 + ")")
するpoints.append
と、それはインディアナ南部のどこかにあります。
この予測で何が間違っているのですか?