D3.js 在画布图像上映射投影

Question

我正在尝试获取画布元素的内容（实际上只是加载到画布上的图像）并使用 d3 将它们扭曲为不同的地图投影。所以我找到了一个这样做的例子（this other SO question）。

问题在于它不适用于每个投影。代码：

var height = 375,
    width = 750;

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;

var context = canvas.getContext('2d');

var projection = d3.geo.lagrange()
    .translate([width/2, height/2])
    .scale(100); //SET SCALE HERE

var path = d3.geo.path().projection(projection);

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'http://i.imgur.com/zZkxbz7.png';
image.onload = function() {
    var dx = width,
        dy = height;

    context.drawImage(image, 0, 0, dx, dy);

    var sourceData = context.getImageData(0, 0, dx, dy).data,
        target = context.createImageData(dx, dy),
        targetData = target.data;

    for (var y = 0, i = -1; y < height; ++y) {
        for (var x = 0; x < width; ++x) {
            var p = projection.invert([x, y]),    //ERROR HERE
                λ = p[0],
                φ = p[1];
            if (λ > 180 || λ < -180 || φ > 90 || φ < -90) {
                i += 4;
                continue;
            }
            var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2;
            targetData[++i] = sourceData[q];
            targetData[++i] = sourceData[++q];
            targetData[++i] = sourceData[++q];
            targetData[++i] = 255;
        }
    }

    context.clearRect(0, 0, width, height);
    context.putImageData(target, 0, 0);
}

在上面的例子中，如果我将投影的比例设置得太低（比如 80），那么变量 p（在 for 循环中）最终会变成 null。我不确定为什么会发生这种情况，我需要设置比例以使投影适合画布区域。

一个有效的 jsfiddle 示例：http://jsfiddle.net/vjnfyd8t/

Answer 1

（这是一个有趣的问题）

我不太明白这里发生了什么，但 FWIW，this is the implementation of the Lagrange invert() method。显然，在某些情况下它返回 null，大概是每当 x 或 y 超出某些范围时（x，y 是 pre-transformed here）。所以我猜你应该忽略空值（例如通过将输出像素设置为透明），最后你仍然可以获得适当的缩放地图。

This is what I get 忽略 nulls（但用红色突出显示它们，以说明它发生的位置）

if (!p) {
  targetData[++i] = 255;
  targetData[++i] = 0;
  targetData[++i] = 0;
  targetData[++i] = 255;
  continue;
}

如果将比例设置为 94，则红色条带会完全消失，这似乎是最合适的（至少在该比例下）。 这是你想要的吗？