Transition between x and y positions

[Drew Winget]

I have a layout of a bunch of images using 3d transforms (for performance and because I need the exact position data to be sharable between several simultaneous rendering environments (html/svg/canvas)). The initial layout works great. I map the calculated x and y positions from my layout function to the transform style strings using d3 selections. The update selection adjusts the translateX and translateY values when the containing element resizes. 

However, if I add a transition to the update selection, the element first warp to 0,0 in the transform space and animate to their new positions. This is not the desired behaviour. The elements should smoothly shift from their present position to their new position. If I map the x and y values to margin-left and margin-top instead, the transition works correctly. 

I have determined this is because d3.transition can easily animate between numerical values, but not string values. Therefore, I see that I need to provide a custom interpolator to the .styleTween() method, and that interpolator should probably use the interpolateString utility method to locate the numerical values in the start and end strings. However, I cannot find any example of doing this with the given data in an update selection. 

This block shows custom string interpolation, but the start and end values are hard-coded.

This one does the same: hardcoded values. How can I make an element transition from one position (as a CSS3 3d transform on a DOM element) based on its current position, to its new position without resetting to 0,0?

Thank you everyone for your help. Please let me know of any examples you know of that show this type of interpolation, and let me know if there's more I can do to help explain. I will work on a fiddle of the base-case, but I am more interested in the conceptual basis for the solution, so I would appreciate feedback most from those people who already know what I'm talking about here based on the documentation, an understanding of selections, and the links I have provided.

Thanks again!

-Drew

[Drew Winget]

Whoops, forgot the blocks links:

http://bl.ocks.org/mbostock/3305854

http://bl.ocks.org/mbostock/3173784

[Drew Winget]

Here is a fiddle illustrating the problem: http://jsfiddle.net/j2vq6v3q/2/

Notice that on update, the div is going back to 0,0 before it is transitioning. I want it to transition from its present position to its new position, not pop back to the origin and then transition.