Question

In the d3 docs on transitions, it says that transition.select(selector) is approximately equivalent to selection.select(selector).transition() saying that the sub-transition version inherits easing, duration and delay from the current transition.

My observation from using both approaches is that sub-transitions must actually have a slightly deeper relationship with the parent transition than the docs imply. What I’ve seen is that if I have 2 transitions that are very closely related to each other, I must use a sub-transition to get both transitions to run perfectly together.

Here’s a contrived example to illustrate the point (although this is simple enough that it would possibly not show the problem in reality). Say I have this in my DOM:

    <g>
        <circle></circle>
    </g>

Transition 1 runs on <g> and applies a “transform=translate(100,0)” to move it horizontally.

Transition 2 runs on <circle> and simply reverses this by applying a “transform=translate(-100, 0)” to move it back horizontally the other way.

The expected result is that the circle does not move at all. But what I actually see depends on how the transitions are set up. If I use 2 separate transitions configured with identical properties for duration and so on, I see the circle appear to jitter just slightly. Presumably this is because the intermediate values passed into the transition interpolators are slightly out of sync.

However, if I use sub-transitions to set up the 2 transitions, it looks perfect.

My question is about the relationship between a transition and a sub-transition. What is the difference in terms of timing and interpolation between using separate transitions versus using sub-transitions?

Answer 1

Subtransitions inherit:

• the transition id (allowing them to proceed concurrently with the parent transition)
• the reference time (synchronizing them with the parent transition)
• the easing function
• the per-node computed delay
• the per-node computed duration

Take a look at transition-select.js and transition-selectAll.js for reference. In your case, it’s the reference time that is needed to synchronize the transitions on the g and circle elements.

This is a public property (transition.time), so you could set it explicitly if you wanted to synchronize two transitions without creating them through transition.transition or transition.select. But I can’t see any reason not to use a subtransition here.

Edit: As of D3 3.0, you can use transition.each(callback) to create transitions that inherit transition parameters. This is similar to transition.select and transition.selectAll, except you have more flexibility over how you select elements to create the transition.