Transitions with both scaleTo and translateTo

[pete-thompson]

I'd like to use a transition with both a scaleTo and a translateTo concurrently. So far as I can tell you can't do this - you can only transition using one of the convenience functions at a time. You can use the transform method to transition everything, but the minor gripe with this is that I need to calculate the full transform and lose the convenience of the translateTo method.

I asked about this on Stack Overflow (https://stackoverflow.com/questions/46342757/d3-v4-zoom-using-transitions-doesnt-seem-to-work) and have a JSFiddle to demonstrate it: https://jsfiddle.net/PeteThompson/z2amv1dv/

[mbostock]

Sorry, I don’t have a great answer here.

It’d be possible to change transition.call(zoom.scaleTo, …) and transition.call(zoom.translateTo, …) to compose, that is, to augment the “zoom” tween on the transition rather than to replace it. But, I’m not entirely sure whether that would be the expected behavior, and whether we should consider that a backwards-compatible change.

Probably a cleaner approach would be a way of deriving the new transform from an existing transform, rather than immediately applying that new transition (either to a selection or a transition). But the API for that is a little tricky since you’d still need to know the element associated with that transform, so that you can compute its extent and centroid and corresponding constraints. I guess in theory that could be as simple as transform.scaleTo(k, element). Then you could use transition.call(zoom.transform, …), passing in a function that uses transform.scaleTo and transform.translateTo internally.

[pete-thompson]

Thanks Mike, sorry for the delay replying - I'm guessing GitHub notifications are disappearing in my junk folder:(

Anyway, I did work around this by writing a custom translation function, which is obviously harder than calling the convenience functions. Clearly it's not a huge priority issue, but it did confuse me for a while (I was getting very odd behaviour as I panned with the mouse, then programatically zoomed and panned in order to fit my chart to the page). Not sure if a documentation update might have helped, but in all likelihood I wouldn't have read it anyway! At least now a Google search would find these discussions and point people in the right direction.

[webholics]

Just had the same issue. Additional convenience methods transformScaleBy and transformScaleTo would be nice.

[mbostock]

I think this should be done using new convenience methods on d3.zoom, or augmenting this existing ones as described in #178.