title: How to avoid flicker when redrawing svg?
body: <p>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 <code>$("id").html("")</code> . 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.</p>
  
  <pre><code>$("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);
  });
  </code></pre>
  
  <p>drawDashBoard re-draws all the charts. Sometimes there's flicker and sometimes there is smooth transition.</p>