javascript - 避免在 d3.geo.tile 中闪烁

Question

我正在实现一个基本的交互式 map ，其中一些数据位于 openstreetmap 图 block 之上。该代码与经典的 d3.geo.tile 示例非常相似: http://bl.ocks.org/mbostock/5342063

除一件事外，一切似乎都运行良好:瓷砖在缩放和平移过程中闪烁。在原始示例和到目前为止我遇到的 d3.geo.tile 的所有其他用例中也观察到了这种效果。出现此 UX 错误是因为浏览器并不总是能够立即下载磁贴。令人惊讶的是，即使加载了某个图 block ，也不能保证它会立即重新出现——闪烁确实会时不时地重新出现。

诸如 Leaflet 之类的灵活 map 库会尝试通过显示先前缩放级别的缓存图 block 来补偿闪烁，直到请求的图 block 准备就绪。在我看来，如果 d3.geo.tile 也能做类似的事情就好了。

我尝试使用 image.exit() 的想法是，在加载新图 block 时，之前显示的图 block 可能会在屏幕上保留一段时间。但不幸的是，没有任何效果。

有人可以建议解决此问题的方法吗？不闪烁的流畅 D3 map 是 2016 年世界值得拥有的东西! :–)

UPD

事实证明，让 tile url 的随机性降低一点部分可以解决问题(当重新访问某个 View 时，闪烁会减少):

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

Demo

但是，这并不能从整体上解决问题。

Answer 1

我会简单地更改背景颜色以匹配图 block 的基色(在本例中为浅灰色/紫色)。这当然是一种 hack，但可以保证消除令人讨厌的“闪烁”效果。

在我看来，使它如此糟糕的原因是闪烁是白色的。