feat: add a simple paused and progress with event to control transition animation.

[snowyu]

[snowyu]

1. Performance minimize it depends on the time consumed by listeners. Nevertheless, I've still done the following optimization.: no events will be emitted when the progress is unchanged.

2. I've found a strange error in your (https://observablehq.com/d/97dc4e77951d416d) scenario:

   • This shouldn't happen.

   VM32 observablehq-21:35 Uncaught (in promise) TypeError: transition.interrupt is not a function
    at eval (VM20 observablehq-21:35)
   

3. the progress has been passed in the event(the fourth argument).

   .on("progress", function(data, index, group, progress) {
    });
   

[Fil]

Thanks for pointing out that progress is the 4th argument, I had missed it. And I've now fixed the transition.interrupt error in the test notebook.

I still don't understand why progress jumps from 0.25 to 1 when we resume the transition at 5000ms. It seems that it restarts at 0.5 if I resume at 3000ms, so it may be because the actual time elapsed during the pause has been counted somehow?

Also, I get an error when I click "replay" in the middle of the transition, I'm not sure why.

[snowyu]

1. I should add an unit test to verify it.
2. It's seem that the transition is done(disposed). Sorry I do not know the observablehq.

[snowyu]

finally I got it. You can try now.

[Fil]

perfect! https://observablehq.com/d/97dc4e77951d416d is working as expected (see https://observablehq.com/d/97dc4e77951d416d@59 for the previous version). The other error I mentioned was because I had not properly disposed the timers, that's fixed too.

So the only question that remains for me is the possible performance hit. In the default case, when no listeners are set on "progress", can we make sure we're not spending more CPU cycles?

[snowyu]

• D3:

• D3-Progress: