NVD3图表抑制隐藏图表的渲染

NVD3 Chart Suppress Rendering for Hidden Charts

本文关键字：NVD3 隐藏      更新时间：2023-09-26

我遇到了与这里描述的类似的问题：

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

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

然而，我有一种感觉，ALL的图表正在重新渲染，无论它们是在活动选项卡上（可见）还是在未选择的选项卡上（隐藏）。例如，如果我有20个选项卡页，那么重新渲染所需的时间要比2个选项卡页长得多。

有人知道如何确保只有活动图表才能调整大小/重新绘制吗？如果图表不可见，如何抑制调整大小/重绘事件？

我所做的是在第一次创建图表时将它们存储在一个数组中。我知道"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);
    }
});

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

相关文章：