Transition interruption not behaving as expected

Steps to reproduce:

1. Render a dot file (first)
2. Transition into a different dot file (second) rendering
3. Interrupt transition before it finishes
4. Transition again into a third dot file

Expected behaviour

1. The third transition should begin right away and from the state the svg is at the moment of the interruption

Current behaviour

1. The second transition is interrupted but there is a delay (as big as the remaining transition time)
2. Then the third transition takes over (choppy)

My rendering code

      selectAll([container]).selectAll("*").interrupt("reload");
      const t = transition("reload").ease(easeCubic).duration(3000);
      graphviz(container)
        .zoomScaleExtent([0, Infinity])
        .zoom(true)
        .tweenShapes(true)
        .convertEqualSidedPolygons(false)
        .growEnteringEdges(true)
        .tweenPaths(true)
        .fade(true)
        .tweenPrecision("25")
        .transition(t as any) // @TODO: no clue why there is a type problem there
       .renderDot(dot);

[magjac]

Thank you so much for this. I’ll look into it as soon as I can carve out some time and mental space for it.

[dbuezas]

Got it.

I suspect something is waiting for the end event in the transition to happen. Calling element.__transition[group].timer.call(duration) on all elements does make the next transition start right away (but does jump to the end of the previous transition).

I’ll make a test repo soon then 😃.

Thanks for this awesome module btw, I’ve been using it for years, great work!