NVD3图表禁止呈现隐藏图表 [英] NVD3 Chart Suppress Rendering for Hidden Charts

问题描述

我对 HERE ：

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

The solution that worked for me, was to implement the following code:

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

然而，我有一种感觉，图表中的全部正在无论他们是处于活动标签（可见）还是在未选择的选项卡（隐藏）中重新呈现。例如，如果我有20个标签页，则需要比2个选项卡页更长的时间。

I have a feeling, however, that ALL of the charts are being re-rendered, regardless of whether they are on the active tab (visible) or in the non-selected tabs (hidden). If for example I have 20 tab pages, it takes far longer to re-render than it does for 2 tab pages.

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

Does anyone know how to ensure ONLY the active chart gets resized / redrawn? Ie how can the resize / redraw event be suppressed if the chart is not visible?

推荐答案

我所做的是将我所有的首先创建数组时的图表。我知道'chart1'是'tab1'的小孩，'chart2'是'tab2'等等（通过设计）的一个孩子，所以我可以使用一些正则表达式确定数组中的索引。

What I did was to store all my charts in an array when they are first created. I know that 'chart1' is a child of 'tab1', 'chart2' is a child of 'tab2' etc... (by design), so I can determine the index in the array using some regex.

一旦索引已知，我们可以直接刷新图表对象，从数组中以零为基础的索引进行访问。

Once the index is known, we can refresh the chart object directly, accessed from the array by zero-based index.

//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事件相比，重绘时间要快得多。

Net result, redraw times much much faster when compared to triggering resize event.

这篇关于NVD3图表禁止呈现隐藏图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！