Comments (3)
Partial solution: make tile url less random (at least less flickering occurs when certain zoom/pan is revisited)
// 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"; })
from d3-plugins.
This is not an issue with d3.geo.tile per se but a limitation of the example. The problem is that the tiles are removed immediately when they are no longer needed (e.g., when the nearest integer zoom level changes), rather than waiting until the new tiles that will replace them have loaded. One way to avoid flickering is to listen to the new tiles being loaded, and when new tiles completely cover an old tile, remove the old tile. This is outside the scope of d3.geo.tile, which simply computes which tiles are visible in a given viewport, and nothing else.
from d3-plugins.
@mbostock waiting for new tiles to load would be an ideal scenario, but it's probably quite difficult to implement (consider a tile split into 4 other tiles 3 out of which are already loaded and one is still on its way). Just a delay of 0.5-1s before a tile is removed can solve 90% of flickering cases. This would improve a lot of visualisations that are built on top of your example.
Even if you think that de-flickering is outside of the team's interest, please at least consider replacing Math.random()
in the tile url. See above + demo.
Cheers!
from d3-plugins.
Related Issues (20)
- The position of node is wrong when node has a layer not be the last layer
- effect of superformula.size doesn't seem predicable
- Link endpoints not being set correctly HOT 1
- instead of using size[0], width variable will trigger wrong size of the sankey diagram
- [d3.geo.tile] Tiles don't render in correct position when zoom >=14 in IE/Edge
- Is it possible that making contours more smooth?
- Extraneous point in d3-hexbin hex generator? HOT 2
- Node without a Link
- How to rotate the hexagon 90° HOT 3
- fisheye: support zoom
- Officially maintained on npm? HOT 2
- Loops within Sankey HOT 1
- Support for v4 HOT 1
- New typescript version of superformulas - license concern
- d3v4 horizon HOT 1
- d3.geom.contour dead loop HOT 2
- fixed bug in resolveCollisions(), please verify and commit. HOT 1
- Graph Rollup use node.id but index HOT 1
- AuthaGraph HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-plugins.