Achieving animated zoom with d3 and Leaflet

Question

Using d3 to plot SVG artefacts on top of a Leaflet map is a simple way to get a solid map controller combined with the strength of d3. There are numerous examples and guides as

Answer 1

Example

I think this is one of the best solutions I have found for combining Leaflet and d3, by ZJONSSON.

d3 + Leaflet Integration

In this example the Leaflet map is initiated as SVG here map._initPathRoot(), with the SVG then selected using d3 var svg = d3.select("#map").select("svg"), g = svg.append("g");, after which all the d3 fun can be had.

In this example, the Leaflet map event map.on("viewreset", update); is used to call update and transition the d3 layer on map viewreset. After this, d3 transition options will determine how the d3 layer reacts to the Leaflet map pan/zoom event.

In this way you have the full scope of the d3 + Leaflet libraries without the hassle of calculating map bounds etc, as this is handled nicely by Leaflet.

Animated Vector Zooming

For animation, the latest Leaflet release includes a Pan and Zoom animation option. Whilst this is not as customisable as d3, you could always edit the Leaflet src code to alter the transition duration! Leaflet GeoJSON vector layers (L.geoJson) will not need to be updated on a Leaflet map event (in update), as they are already added to the map as SVG and handled by Leaflet.

Note that if implementing L.geoJson, this also means you wont need to map._initPathRoot(), as Leaflet will add the layer to the map as SVG, so you can just d3.select it.

It is also possible to add a className variable in the L.geoJson layer options so you can style via CSS or d3.select a feature via a unique class id assigned during Leaflet onEachFeature.