openstreetmap タイルの上にいくつかのデータを配置して、基本的なインタラクティブ マップを実装しています。コードは、古典的な d3.geo.tile の例と非常によく似ています: http://bl.ocks.org/mbostock/5342063
ズームとパン中にタイルがちらつくことを除いて、すべてが完全に機能しているようです。この効果は、元の例と、これまでに遭遇した d3.geo.tile の他のすべての使用例でも見られます。この UX バグは、ブラウザーが常にタイルを即座にダウンロードできるとは限らないために発生します。驚くべきことに、特定のタイルがロードされた後でも、その再表示がすぐに行われるとは限りません。ちらつきは時々再発生します。
Leaflet のような滑りやすいマップ ライブラリは、要求されたズーム レベルの準備が整うまで、以前のズーム レベルからキャッシュされたタイルを表示することで、ちらつきを補正しようとします。私の考えでは、d3.geo.tile についても同様のことができればいいと思います。
image.exit()新しいタイルが読み込まれている間、以前に表示されたタイルが画面に表示されたままになる可能性があるという考えで遊んでみました。しかし、残念ながら、何も機能しませんでした。
誰でもこの問題の解決策を提案できますか? ちらつきのないスムーズな D3 マップは、2016 年の世界にふさわしいものです。:–)
UPD
タイルの 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"; })
ただし、これで問題が完全に解決するわけではありません。