Question

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

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

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

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

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

Answer 1

我所做的是在首次创建时将所有图表存储在数组中。我知道＆＃39; chart1＆＃39;是一个孩子的＆＃39; tab1＆＃39;，＆＃39; chart2＆＃39;是一个孩子的标签2＆＃39;等...（按设计），所以我可以使用一些正则表达式确定数组中的索引。

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

//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);
    }
});

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

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

1 个答案: