5

我在 d3 中使用标准的 AlbersUSA 投影。

不过，我遇到的一件事是，由于阿拉斯加和波多黎各位于相邻州绘制的“矩形”之外，因此我无法将缩放系数最大化以适应较小的视口。

理想情况下，我想把波多黎各搬到路易斯安那州以下，并可能与夏威夷和阿拉斯加交换位置，这会给我更好的工作范围。

查看文档，我看到 AlbersUSA 组合是使用以下函数创建的：

function albersUsa(coordinates) {
  var lon = coordinates[0],
      lat = coordinates[1];
  return (lat > 50 ? alaska
      : lon < -140 ? hawaii
      : lat < 21 ? puertoRico
      : lower48)(coordinates);
}

我怎样才能修改这个函数（或有效地创建我自己的函数），以便我可以移动状态而不必担心增加 GeoJSON 数据本身？

4

1 回答 1

1

（这个我没试过）

  1. 从 d3 源代码中复制代码d3.geo.albersUsa（代码包含在这篇文章的底部）。

  2. 修改名称：d3.geo.myAlbersUsa = function() { ... }

  3. 查看函数内部albersUsa.translate。这就是这三个州被转移到他们的“人工”位置的地方。例如alaska.translate([dx - 400 * dz, dy + 170 * dz]);

  4. 调整这些数字（400 和 170），直到它移动到您想要的位置（从小的变化开始，例如 +/- 10）。

  5. 对于您将数据绘制到的任何路径，您需要将其投影指定为您的自定义投影：path.projection(d3.geo.myAlbersUsa())

从 D3 源代码，这是您需要在步骤 1 中复制/粘贴的代码：

// A composite projection for the United States, 960x500. The set of standard
// parallels for each region comes from USGS, which is published here:
// http://egsc.usgs.gov/isb/pubs/MapProjections/projections.html#albers
// TODO allow the composite projection to be rescaled?
d3.geo.albersUsa = function() {
  var lower48 = d3.geo.albers();

  var alaska = d3.geo.albers()
      .origin([-160, 60])
      .parallels([55, 65]);

  var hawaii = d3.geo.albers()
      .origin([-160, 20])
      .parallels([8, 18]);

  var puertoRico = d3.geo.albers()
      .origin([-60, 10])
      .parallels([8, 18]);

  function albersUsa(coordinates) {
    var lon = coordinates[0],
        lat = coordinates[1];
    return (lat > 50 ? alaska
        : lon < -140 ? hawaii
        : lat < 21 ? puertoRico
        : lower48)(coordinates);
  }

  albersUsa.scale = function(x) {
    if (!arguments.length) return lower48.scale();
    lower48.scale(x);
    alaska.scale(x * .6);
    hawaii.scale(x);
    puertoRico.scale(x * 1.5);
    return albersUsa.translate(lower48.translate());
  };

  albersUsa.translate = function(x) {
    if (!arguments.length) return lower48.translate();
    var dz = lower48.scale() / 1000,
        dx = x[0],
        dy = x[1];
    lower48.translate(x);
    alaska.translate([dx - 400 * dz, dy + 170 * dz]);
    hawaii.translate([dx - 190 * dz, dy + 200 * dz]);
    puertoRico.translate([dx + 580 * dz, dy + 430 * dz]);
    return albersUsa;
  };

  return albersUsa.scale(lower48.scale());
};
于 2012-10-24T18:26:41.410 回答