NVD3图表禁止隐藏图表的渲染

我遇到了与此处描述的问题类似的问题：

对我有用的解决方案是实现以下代码：

$(function () { $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { window.dispatchEvent(new Event('resize')); }); }); 

但是，我感觉所有的图表都在重新渲染，无论它们是在活动标签上（可见）还是在非选定标签（隐藏）中。 例如，如果我有20个标签页，则重新渲染所需的时间比2个标签页要长得多。

有谁知道如何确保只有活动图表被resize/重绘？ 即如果图表不可见，如何抑制resize/重绘事件？

Answer 1

我所做的是在第一次创建时将所有图表存储在一个数组中。 我知道’chart1’是’tab1’的孩子，’chart2’是’tab2’等的孩子……（按设计），所以我可以使用一些正则表达式确定数组中的索引。

一旦知道索引，我们就可以直接刷新图表对象，通过从零开始的索引从数组访问。

 //Resize Event needs to be triggered when tab changes. $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { var plotID, ev; try{ plotID = $(e.target).attr("href").replace(/[#A-Za-z$-]/g,"") d3.select("#chart"+ plotID +" svg").call(charts[(plotID-1)]) }catch(err){ //Fallback ev = document.createEvent('Event'); ev.initEvent('resize', true, true); window.dispatchEvent(ev); } }); 

与触发resize事件相比，净结果重绘时间要快得多。