如何在d3 AlbersUSA投影中移动州？

Question

如何在d3 AlbersUSA投影中移动州？

javascriptpositiond3.js

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数据本身？

- Dillie-O

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meetamit · Accepted Answer

我还没有尝试过这个方法

从D3源代码中复制d3.geo.albersUsa的代码（代码包含在本帖底部）。
修改名称：d3.geo.myAlbersUsa = function() { ... }
查看函数albersUsa.translate。这是将三个州移动到它们“人工”位置的地方。例如：alaska.translate([dx - 400 * dz, dy + 170 * dz]);
微调这些数字（400和170），直到它移动到您想要的位置（从小的变化开始，如+/- 10）。
对于任何您正在绘制数据的路径，您需要指定其投影为您的自定义投影：path.projection(d3.geo.myAlbersUsa())

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

// 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());
};