sghall
commented
7 years ago I'd like to have this as well, but it will be awhile before I can work on it.
The thing with D3 zoom is that it actually is animating just a single element (it animates the translation and scale on the inner g element). Resonance, right now, works on arrays of data. It really needs to export an Animate component that can work on a single item and render its children. In the zoom example you linked to the state paths are just static except for highlighting when selected.
The zoom interpolator is exported from d3-interpolate, so I can see it's possible to get the same transitions from point to point, but it would require quite a bit of work to get draggable panning.
Here's the zoom interpolator: https://github.com/d3/d3-interpolate/blob/master/src/zoom.js
That would get you the basic transitioning from point to point on the map. Click on a state, zoom in. Click on that state again zoom out. If you don't need the panning/dragging stuff.
For the panning you would need to setup event listeners like in d3-zoom which is fairly complex: https://github.com/d3/d3-zoom/blob/master/src/zoom.js
If I was going to do it I would probably:
(1) Add the Animate component to Resonance for a single element that renders it's children. (2) Then create a higher level component that was a stand alone npm module like resonance-zoom or something. That's where all the events listeners etc would get setup dragging/panning.
It'd be cool if Resonance supported zoom transitions as per Mike Bostock's example here: https://bl.ocks.org/mbostock/9656675, to smoothly interpolate between different views.