如何使用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

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

您无法控制投影的旋转，也无法使用非圆柱投影（只有未旋转的圆柱投影可以独立绘制lat和long）。 但是如果它们不使用相同的方法，它也很难将按比例放置的特征与其他地图元素对齐。

相反，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像素地图（设置较大的地图比例将地图扩展到更大的区域）。