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]，这将位于加拿大西海岸的某个地方。如果我在.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°的西部。

d3.js投影（albersUsa）映射不正确

1 个答案: