Question

我正在使用d3.js尝试为包含订单ID，订单运送地址的纬度和经度以及在订单上花费的金额的csv数据文件映射坐标。我已经尝试将它们线性地绘制出来，并尝试使用对数刻度，但是绘图点似乎仍然偏斜。我试图使它看起来像一张略微相似的美国地图，但该地图似乎弯曲/倾斜。我确保将经度设置为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度为中心，并设置为960x500像素地图。但是您可以修改比例，中心和旋转，例如：

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

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

在您的情况下，有一个覆盖美国的特殊合成投影d3.geoAlbersUsa，它可以容纳夏威夷和阿拉斯加。但是，由于它的复合特性，它的灵活性较差，尽管您仍然可以扩展它。默认比例尺预期使用960x600像素的地图（设置较大的比例尺将地图扩展到更大的区域）。

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

1 个答案: