显示磁贴显示失败的替代图像/磁贴(D3 地理磁贴)

Question

我正在尝试修改 Mike Bostock 的 D3 地理图块应用程序，以便在找不到图块的地方显示替代图像/图块集(例如缩放级别太高(。这将为脚本提供更大的灵活性。

我的解决方案几乎有效，但我无法将磁贴比例/转换 (d( 传递给我的解决方法函数。这是我的jsfiddle，下面是我尝试在无法加载瓷砖的地方显示替代图像的代码：

image.enter().append("image")
.attr("x", function(d) { return d[0] * 256; })
.attr("y", function(d) { return d[1] * 256; })
.attr("width", 256)
.attr("height", 256);
// create a test image
var imgTest = new Image();
// if it loads successfully add it to the svg image
imgTest.onload = function(d) {
image.data(tiles, function(d) { return d})
.attr("xlink:href", function(d){return imgTest.src});
}
// if it fails test another image
imgTest.onerror = function() {
imgTest.src = "https://dummyimage.com/50x50/000/fff.png&text=An+Image!"
}
// this will (potentially) fail
imgTest.src = "https://" + "abc"[d[1] % 3] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";

Answer 1

好吧，没有人介入回答我的问题。尽管如此，我还是找到了另一种方法来实现我需要的(即摆脱那些可怕的损坏的链接图标(。这简单得离谱...但在任何地方都找不到这个，它适用于 D3。

.attr("onerror", "this.style.display='none'")

下面是上下文中的代码行：

image.enter().append("image")
.attr("xlink:href", function(d) { return "https://" + "abc"[d[1] % 3] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("x", function(d) { return d[0] * 256; })
.attr("y", function(d) { return d[1] * 256; })
.attr("onerror", "this.style.display='none'")
.attr("width", 256)
.attr("height", 256);