javascript - 重画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() 的东西。将旧图表的删除放在该数据检索调用的回调中。