如何使用 d3 获取地图以准确显示经度和纬度

Question

我正在使用 d3.js 尝试映射 csv 数据文件的坐标，该文件包含订单 ID、订单发货地址的纬度和经度以及订单花费的金额。我尝试过将它们线性地绘制出来并尝试使用对数刻度，但绘图点似乎仍然倾斜。我试图让它看起来像美国地图，它有点相似，但地图似乎扭曲/倾斜。我确保将经度设置为 x 轴，将纬度设置为 y 轴。圆圈的半径与订单花费的金额有关。我想知道它是否与使用的比例有关，但这是我第一次尝试弄乱 d3，所以任何帮助/建议将不胜感激！

  var outerWidth  = 500;
  var outerHeight = 250;
  var margin = { left: -50, top: 0, right: -50, bottom: 0 };

  var xColumn = "longitude";
  var yColumn = "latitude";
  var rColumn = "total";
  var dollarPerPixel = 10;

  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;

  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);

  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var xScale = d3.scale.log().range([0, innerWidth]);
  var yScale = d3.scale.log().range([innerHeight, 0]);
  var rScale = d3.scale.sqrt();

  function render(data){

    xScale.domain( d3.extent(data, function (d){ return d[xColumn]; }));
    yScale.domain( d3.extent(data, function (d){ return d[yColumn]; }));
    rScale.domain([0, d3.max(data, function (d){ return d[rColumn]; })]);

    // Compute the size of the biggest circle as a function of dollarPerPixel.
    var dollarMax = rScale.domain()[1];
    var rMin = 0;
    var rMax = Math.sqrt(dollarMax / (dollarPerPixel * Math.PI));
    rScale.range([rMin, rMax]);

    var circles = g.selectAll("circle").data(data);
    circles.enter().append("circle");
    circles
      .attr("cx", function (d){ return xScale(d[xColumn]); })
      .attr("cy", function (d){ return yScale(d[yColumn]); })
      .attr("r",  function (d){ return rScale(d[rColumn]); });
    circles.exit().remove();
  }

  function type(d){
    d.latitude   = +d.latitude;
    d.longitude  = +d.longitude;
    d.total = +d.total;
    return d;
  }

  d3.csv("data.csv", type, render);

Answer 1

虽然比例尺似乎是绘制地理点的合适方法：但不要使用这种方法。

您失去了对投影旋转的控制，并且无法使用非圆柱投影（只有未旋转的圆柱投影可以独立绘制纬度和经度）。但如果不使用相同的方法，则也很难将按比例定位的要素与其他地图元素对齐。

相反，D3 具有广泛的内置投影。

投影采用 [经度,纬度] 对并返回 [x,y] 坐标。纬度和经度必须以度为单位，x 和 y 必须以像素为单位。

要创建投影，您可以使用：

var projection = d3.geoMercator() // or geoAlbers, geoSupportedProjection, etc.

要使用它，只需传递一个坐标：

projection([long,lat]) // [x,y]

在你的情况下，这可能看起来像（对于 cx，cy 看起来相似）

 .attr("cx", function(d) { return projection([d.long,d.lat])[0] })

现在，该投影默认以 0.0 度为中心，并设置为 960x500 像素地图。但你可以修改比例、中心和旋转，例如：

var projection = d3.geoMercator().center([-100,35]).scale(1000)

要更完整地了解投影方法，您应该查看 d3-geo 的文档。

在您的例子中，有一个覆盖美国的特殊复合投影 d3.geoAlbersUsa，其中包含夏威夷和阿拉斯加的空间。但是，由于其复合性质，灵活性较差，尽管您仍然可以扩展它。默认比例预计为 960x600 像素地图（设置更大的地图比例会将地图分布到更大的区域）。