Question

有一个奇怪的性能问题，我有一组数据，并有多个标签，从数据创建不同的交叉过滤器。

我注意到如果你切换标签，图表会变慢。我试图用以下内容“破坏”选项卡之间的交叉过滤器（我将所有交叉过滤器存储在一个对象中。

deleteAllCharts: function (){
            d3.selectAll(".dashboard_chart").selectAll("svg").remove();
            Object.keys(crossStore).forEach(function (keyid){
                dc.filterAll();
                crossStore[keyid].remove();
            });
        }

是否值得将过滤器设置为null？

另外，我目前对尺寸/组不做同样的事情。是否值得摧毁这些？

Answer 1

我会重复上面所说的话：我注意到要从另一个交叉过滤器创建一个交叉过滤器，最好的办法是让你的reduce函数在下一个交叉过滤器中存储你想要的数据对象集，创建一个数据数组，从中创建下一个交叉过滤器。这解决了滞后问题。

所以这个： foodProbingCookedGroup = foodIdDimension.group（）。reduce（ //将项目添加到结果时的回调。 function（p，v）{ if（p.firstProbeTime == null）{ p.firstProbeTime = v.dd; p.lastProbeTime = v.dd; p.probed_food_name = v.probed_food_name; } p.finalProbeTime = v.dd; p.lifeInMinutes =（v.dd.getTime（） - p.firstProbeTime.getTime（））/ 60000;

            p.stationLife.push({
                staff_name : v.staff_name, 
                probed_food_name: v.probed_food_name,
                minutesAtPreviousStation : (v.dd.getTime()-p.firstProbeTime.getTime()) / 60000,
                previous_station_name : p.previous_station_name,
                currentProbeTime : v.dd,
                temperature : v.probed_food_history_temperature,
                station_name : v.station_name,
                station_type : v.station_type 
            });
            p.previous_station_name = v.station_name;
            return p;
        },
        // Callback for when deleted
        function (p,v){
            // Do nothing.
            return p;
        },
        // Initialise function
        function (){
            return ({
                firstProbeTime: null,
                lastProbeTime: null,
                finalProbeTime: null,
                lifeInMinutes: 0,
                probed_food_name: "",
                previous_station_name: "",
                stationLife: [] 
            });
        }
    );

然后在范围图表上添加：

        .on("postRedraw", function (chart) {renderFoodTimeChards(chart);});

然后该函数执行以下操作：函数renderFoodTimeChards（filterChart）{

    var data = [];

    var foodGroup;
    //Get the range of the filtered data.
    if (typeof filterChart == 'undefined' || filterChart.filter() === null ){
        foodGroup = foodProbingCookedGroup.top(Infinity);
    }
    else{
        var fromDate = filterChart.filter()[0].getTime();
        var toDate = filterChart.filter()[1].getTime();
        foodGroup = foodProbingCookedGroup.top(Infinity).filter(function(d){
            var timeToCheck = d.value.firstProbeTime.getTime();
            return ( timeToCheck >= fromDate && timeToCheck <= toDate)
        });

    }
    // Derive the set of data we need. 
    foodGroup.forEach(function (d){
        data = data.push({
            probed_food_name: d.value.probed_food_name,
            lifeInMinutes : d.value.lifeInMinutes
        });
    })

    crossStore["foodLifeStore"] = crossfilter(data);

dc.js的性能问题，页面上有多个选项卡中的图形

1 个答案: