重绘svg时如何避免闪烁？

Question

我有几个终点，例如：rule1，rule2。我需要使用按钮单击事件在这两个端点之间切换，并使用d3js图表显示数据。当我在这两者之间切换时，我注意到一种令人不舒服的闪烁。对于每个按钮点击事件，我使用$("id").html("")清空相应div中的内容。在上面的命令之后，我正在调用重绘整个图表的函数。我不明白为什么屏幕上会出现闪烁。

$("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重新绘制所有图表。有时闪烁，有时平滑过渡。

Answer 1

闪烁的原因可能是加载新数据或图表创建需要相当长时间后的延迟。

在这两种情况下，在将旧图表替换为新图表之前，尽可能长时间保持旧图表是有益的。

因此选项一是：将图表绘制在用户不可见的单独<div>元素中。完成绘图后，将旧图表替换为旧图表。

另一种选择是等待删除至少直到数据可用。因此，在您的drawDashBoard()中，您会在某些时候拥有类似d3.json()的内容。将旧图表的删除放在该数据检索调用的回调中。