score:1

Accepted answer

your transitions are trouncing each other.

if you look at the source code to the examples here, you'll notice this curious line in the tick function:

function tick() {
    transition = transition.each(function() {
    ...

according to docs:

if type is not specified, behaves similarly to selection.each: immediately invokes the specified function for each element in the current transition, passing in the current datum d and index i, with the this context of the current dom element. any transitions created within the scope of transition.each will inherit transition parameters from the parent transition, including id, delay, duration and easing. thus, transitions created within a transition.each will not interrupt the parent transition, similar to subtransitions.

the transition.each method can be used to chain transitions and apply shared timing across a set of transitions.

[bolding mine]

applying this to your example, seems to fix your issue.

note, i had to change your paths variable. after i wrapped up the transitions, it was no longer a smooth transition when contained in the outer g element.


Related Query