避免在 d3.geo.tile 中闪烁答案

【问题标题】：Avoid flickering in d3.geo.tile避免在 d3.geo.tile 中闪烁
【发布时间】：2016-07-18 23:04:57
【问题描述】：

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

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

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

Demo

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

【问题讨论】：

标签： javascript d3.js user-experience flicker d3.geo

【解决方案1】：

我会简单地更改背景颜色以匹配瓷砖的基本颜色（在本例中为浅灰色/紫色）。这当然是一个 hack，但可以保证消除烦人的“闪烁”效果。

在我看来，它之所以如此糟糕，是因为闪烁是白色的。

【讨论】：