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

【问题标题】：NVD3 Chart Suppress Rendering for Hidden ChartsNVD3 图表抑制隐藏图表的渲染
【发布时间】：2015-03-22 05:32:57
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript jquery events charts nvd3.js

【解决方案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);
    }
});

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

【讨论】：