How to fake a computation elapsed time and message within transition?

Question

I have a D3 JS code that does a transition between two states of a barchart. I now need some extra elapsed time in the middle of the transition i.e. after the old state is removed and before the new state appears that adds an extra delay and shows something like "Computing something, please wait ...".

This example could be used as reference. What I need is an extra pause in between the transition that shows a message to the user.

Steve · Accepted Answer · 2019-01-12T16:11:58.917

For a fixed delay, you can use use delay. See https://github.com/d3/d3-transition#transition_delay

For a dynamic delay, you can use the 'end' event, coupled with another transition (from https://stackoverflow.com/a/10692220/6184972), like:

d3.select('#myid').transition().style('opacity', '0').on('end', function () {
    console.log('computing...');
    setTimeout(function () {
        console.log('Done!');
        d3.select('#myid').transition().style('opacity', 1);
    }, Math.random() * 2000 + 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="myid">Hi World</div>

How to fake a computation elapsed time and message within transition?

1 Answers1