避免在d3.geo.tile中闪烁

我正在实现一个基本的交互式地图，其中一些数据放在openstreetmap瓦片的顶部。该代码与经典的d3.geo.tile示例非常相似：http://bl.ocks.org/mbostock/5342063

除了一件事之外，一切似乎都很完美：瓷砖在缩放和平移过程中闪烁。这种效果在最初的例子和迄今为止我遇到的d3.geo.tile的所有其他用例中也可以观察到。出现这种用户体验错误是因为浏览器并不总是能够立即下载互动程序。令人惊讶的是，即使在加载了某个磁贴之后，它的重新出现也不能保证是即时的——闪烁确实会不时出现。

像Leaflet这样笨拙的地图库试图通过显示以前缩放级别的缓存瓦片来补偿闪烁，直到请求的瓦片准备好为止。在我看来，如果d3.geo.tile也能做一些类似的事情，那就太好了。

我尝试使用image.exit()，因为在加载新的磁贴时，以前显示的磁贴可能会在屏幕上保留一段时间。但不幸的是，什么都没用。

有人能为这个问题提出一个解决方案吗？不会闪烁的平滑D3地图是2016年世界应得的！：–）

UPD

事实证明，使tile url不那么随机部分解决了问题（当重新访问某个视图时，闪烁更少）：

// before
image.enter().append("image")
  .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
// after
image.enter().append("image")
  .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][ (d[0] + d[1] + d[2]) % 3 ] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

演示

然而，这并不能从整体上解决问题。