🏠 back to Observable

D3.geoGraticule with D3.zoom?


I’ve been trying to use d3.geoGraticule with d3.zoom to create a zoomable map with graticules with the following code (where transform is the current zoom.transform):

const tmin = projection.invert(transform.apply([0,0]));     
const tmax = projection.invert(transform.apply([width, height]));        
const stepScale = scaleLinear().domain(zoomExtent).range([minStep,maxStep]);
const k = stepScale(transform.k);
const graticules = geoGraticule().extent([tmin, tmax]).step([k, k])();

This results in graticules that stick at one in a single position, while zooming moves the rest to that position.

Any help would be much appreciated.

It’s hard to say for sure without a link to your notebook but it sounds like you’re calling zoom on an object that doesn’t contain the graticule, like so:

If you examine the code for map1 in that notebook, you’ll notice that the graticule is attached to a variable called svg but the zoom is called on another variable called map. If you attach the graticule to the map, you get this:


Thank you for the reply! I see how my description could have been a little a little confusing. The reason I redefine graticules every time rather than appending it at the start and zooming is because the goal is to have a finer set of graticules as one zooms. So the step between graticules shrinks as one zooms.

Edit: using your notebook to make this fork, this is kind of what I’m going for, but I’d like to achieve a smoother transition between the resolutions

1 Like