CODEWITHSUNDEEP
javascripthtmld3.js
user7607612
user7607612

Reputation:

How to avoid flicker when redrawing svg?

I have a couple of End points for eg: rule1, rule2. I need to switch between these two end points using button click event and display the data using d3js charts. When I'm switching between these two, I noticed a flicker which is uncomfortable to the eye. For every button click event I'm emptying the content in the respective divs using $("id").html("") . After the above command, I'm calling the functions which redraws the entire chart. I don't understand why there is a flicker on the screen.

$("button").on("click",function(){
   $("#stackhorizon").html(''); //chart-1
   $("#horizontalbar").html(''); //chart-2
   $("#atom").html(''); //chart-3
   var id = $(this).attr('id'); // id holds the url
   url = id;
   drawDashBoard(url);
});

drawDashBoard re-draws all the charts. Sometimes there's flicker and sometimes there is smooth transition.

Upvotes: 1

Views: 1653

Answers (1)

Sirko
Sirko

Reputation: 74086

The reason for that flickering is probably either the delay until new data has been loaded or your chart creation takes a considerable time.

In both cases it would be beneficial to leave the old chart visible as long as possible before replacing it with the new one.

So option one would be: Draw the chart in a separate <div> element that is not visible to the user. Once you're finished drawing replace the old chart with the new one.

The other option would be to wait with deleting at least until the data is available. So in your drawDashBoard() you will at some point have something like d3.json(). Put the removal of the old chart in the callback of that data-retrieving call.

Upvotes: 3

Related Questions